dle.in.ua » Хаки » Выпадающее меню

Выпадающее меню

Автор: DarkneZ от 28-01-2010, 09:34
Выпадающее меню

Автор идеи и реализации DarkneZ
Название хака: Выпадающее меню
Версия DLE: 8.3 и ниже
Проверен: Opera, IE, Mozilla
Релиз: [WEB Team] - 4webing.ru

Данный хак позволяет Вам создать красивую навигацию для Вашего сайта с помощью HTML, CSS и немного jQuery
Выпадающее меню

Автор идеи и реализации DarkneZ
Название хака: Выпадающее меню
Версия DLE: 8.3 и ниже
Проверен: Opera, IE, Mozilla
Релиз: [WEB Team] - 4webing.ru

Данный хак позволяет Вам создать красивую навигацию для Вашего сайта с помощью HTML, CSS и немного jQuery

1. Зайти в папку с Вашим шаблоном. Открыть файл main.tpl. После тега <body> вставить:


<ul id="navigation">
<li class="home"><a href=""><span>Home</span></a></li>
<li class="about"><a href=""><span>About</span></a></li>
<li class="search"><a href=""><span>Search</span></a></li>
<li class="photos"><a href=""><span>Photos</span></a></li>
<li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
<li class="podcasts"><a href=""><span>Podcasts</span></a></li>
<li class="contact"><a href=""><span>Contact</span></a></li>
</ul>


Ниже добавить:

<script type="text/javascript" src="{THEME}/js/jquery-1.3.2.js"></script>
        <script type="text/javascript">
            $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });

                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>


2. Зайти по адресу Ваш шаблон/css и открыть файл style.css. В самом низу добавить:


ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:98%;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;    
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
     background-color:#CAE3F2;
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;      
}
ul#navigation .home a{
    background-image: url(../images/home.png);
}
ul#navigation .about a      {
    background-image: url(../images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(../images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(../images/rss.png);
}
ul#navigation .photos a     {
    background-image: url(../images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(../images/mail.png);
}

  body{
          
        .header
        {
            width:600px;
            height:56px;
            position:absolute;
            top:50%;
            left:10px;
            background:#fff url(title.png) no-repeat top left;
        }

        a.back{
            width:256px;
            height:73px;
            position:absolute;
            bottom:15px;
            right:15px;
            background:#fff url(codrops_back.png) no-repeat top left;
        }
        a.dry{
            position:absolute;
            bottom:15px;
            left:15px;
            text-align:left;
            font-size:12px;
            color:#ccc;
            text-transform:uppercase;
            text-decoration:none;
        }


3. Качаем исходные файлы и закидываем в папку с шаблоном

P.S. если у вас присутствует файл style.css заменять его не следует!

Демо: Можете посмотреть у нас на сайте [WEB Team] - 4webing.ru

4webing.ru_nav.rar [63.21 Kb] (cкачиваний: 595)
  • Группа: User
  • Icq: --
  • Комментариев: 303
  • Публикаций: 15
  • Меня это херня раздражает. Мне нужен контент. а не кнопки на пол экрана. которые плюс ко всему ещё и скороляться. На кол таких заботливых вэбмастеров

    --------------------
    • SaD
    • Регистрация: 20.02.2009
    • Репутация: (0|0|0)
    • 28 января 2010 10:53
    • 1
    ^
  • Группа: User
  • Icq: 9115263
  • Комментариев: 37
  • Публикаций: 5
  • выкладывай свои идеи я прокоментирую! wink наверно у тебя мониторчик маленький что на пол экрана wink
    • DarkneZ
    • Регистрация: 19.11.2009
    • Репутация: (0|0|0)
    • 28 января 2010 10:58
    • 2
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 311
  • Публикаций: 16
  • Цитата: DarkneZ
    выкладывай свои идеи я прокоментирую!


    Вроде это не твая идеа и разработка... fellow вечером выложу ссылку где все это с{censored} laughing

    --------------------
    • sexo
    • Регистрация: 10.11.2008
    • Репутация: (0|0|0)
    • 28 января 2010 11:18
    • 3
    ^
  • Группа: User
  • Icq: 9115263
  • Комментариев: 37
  • Публикаций: 5
  • давай выкладывай!!!!! и найди чтоб там было написано под дле!
    • DarkneZ
    • Регистрация: 19.11.2009
    • Репутация: (0|0|0)
    • 28 января 2010 11:23
    • 4
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 303
  • Публикаций: 15
  • неадекватный школьник дитектид smile

    --------------------
    • SaD
    • Регистрация: 20.02.2009
    • Репутация: (0|0|0)
    • 28 января 2010 11:28
    • 5
    ^
  • Группа: User
  • Icq: 9115263
  • Комментариев: 37
  • Публикаций: 5
  • вот именно! wink
    • DarkneZ
    • Регистрация: 19.11.2009
    • Репутация: (0|0|0)
    • 28 января 2010 11:39
    • 6
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Цитата: sexo
    Вроде это не твая идеа и разработка... вечером выложу ссылку где все это с{censored}


    Отсюда: _http://ruseller.com/lessons.php?rub=29&id=507
    • nonub
    • Регистрация: --
    • Репутация: (||)
    • 28 января 2010 13:19
    • 7
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 311
  • Публикаций: 16
  • Цитата: nonub
    http://ruseller.com/lessons.php?rub=29&id=507

    Yes.
    Я просто был на работе, а ссылка у меня в компе.

    Данный урок подготовлен для Вас командой сайта http://ruseller.com
    Источник урока: www.tympanus.net

    --------------------
    • sexo
    • Регистрация: 10.11.2008
    • Репутация: (0|0|0)
    • 28 января 2010 13:28
    • 8
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • laughing спасибо..

    зы: шаклата..онлайн
    • ze_vs
    • Регистрация: --
    • Репутация: (||)
    • 28 января 2010 15:50
    • 9
    ^
  • Группа: User
  • Icq: 9115263
  • Комментариев: 37
  • Публикаций: 5
  • просто не все могут подогнать под дле вот я и решил выложить статью, котороя поможет с дле! wink
    • DarkneZ
    • Регистрация: 19.11.2009
    • Репутация: (0|0|0)
    • 28 января 2010 18:25
    • 10
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • оура.
    • AHAHACEKC
    • Регистрация: --
    • Репутация: (||)
    • 28 января 2010 21:26
    • 11
    ^
  • Группа: User
  • Icq: 7398444
  • Комментариев: 101
  • Публикаций: 11
  • lol ды ладно вам тут кипишь устраивать ) ребята просто пропиариться решили) адрез сайта на пол экрана lol

    --------------------
    • 5Nizza
    • Регистрация: 28.07.2009
    • Репутация: (0|0|0)
    • 29 января 2010 02:29
    • 12
    ^
  • Группа: User
  • Icq: 9115263
  • Комментариев: 37
  • Публикаций: 5
  • а как же!
    • DarkneZ
    • Регистрация: 19.11.2009
    • Репутация: (0|0|0)
    • 29 января 2010 07:43
    • 13
    ^
  • Группа: User
  • Icq: 7398444
  • Комментариев: 101
  • Публикаций: 11
  • lol а минусы ставить в репу не хорошо tongue
    зы. я просто говорю то что есть lol в принципе это меню только и радует в твоём сайте wink

    --------------------
    • 5Nizza
    • Регистрация: 28.07.2009
    • Репутация: (0|0|0)
    • 29 января 2010 09:20
    • 14
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 156
  • Публикаций: 2
  • Цитата: DarkneZ
    просто не все могут подогнать под дле вот я и решил выложить статью, котороя поможет с дле!

    ну да ну да...что его там подгонять?
    и нахера в новости по 5 раз писать релиз 4webing.ru демо 4webing.ru....
    дал бы демку на руселер и всё... а то еще в картинки для новости свой сайт влепил 4webing.ru am
    ну да ты конечно сейчас будеш говорить шо ты мелеш бред и отмазыватся что ты нехотел прорекламить свой сайт wink
    • Dimas-rap
    • Регистрация: 16.08.2008
    • Репутация: (0|0|0)
    • 29 января 2010 18:22
    • 15
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 9
  • Публикаций: 1
  • спасибо за уроки взятый с руселера
    ^
  • Группа: User
  • Icq: 1739390
  • Комментариев: 274
  • Публикаций: 44
  • Цитата: Dimas-rap

    перестань ерничить, не важно как подана информация, кому интересно-воспользуеться а поливать гомном не выход, кто как рекламирует свои проэкты, ты вот в подписи, он решил в новости, это рекламма.. з.ы. на _http://freediz.net/ подвал убожественный) пропиши стиль для текста отступы слева и справо, а то не важно смориться..

    --------------------
    • AlexBen
    • Регистрация: 29.01.2010
    • Репутация: (8|7|-1)
    • 29 января 2010 18:55
    • 17
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 156
  • Публикаций: 2
  • AlexBen,
    а фредиз и мирмобил не мои сайты... я просто их админил а теперь вобще на них забил... wink
    • Dimas-rap
    • Регистрация: 16.08.2008
    • Репутация: (0|0|0)
    • 29 января 2010 22:12
    • 18
    ^
  • Группа: User
  • Icq: 9115263
  • Комментариев: 37
  • Публикаций: 5
  • Цитата: AlexBen
    спасибо за поддержку!
    вот теперь берите и подгоняйте сами,им хочешь лучше сделать,а они гавном поливают! все кто хочет остальные переделки под ДЛЕ скачает у нас на сайте! аревуар!
    • DarkneZ
    • Регистрация: 19.11.2009
    • Репутация: (0|0|0)
    • 30 января 2010 08:03
    • 19
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 156
  • Публикаций: 2
  • DarkneZ,
    да... великую работу ты проделал.. сделал
    заменив адрес в пару строчек... и написав свой сайт везде;)
    непиалбы ты свой сайт или хотябы оставил источник на руселер я бы поставил плюс а так извини....
    • Dimas-rap
    • Регистрация: 16.08.2008
    • Репутация: (0|0|0)
    • 30 января 2010 11:41
    • 20
    ^
  • Группа: User
  • Icq: 9115263
  • Комментариев: 37
  • Публикаций: 5
  • да как бы не сделал Вы только мастера обсерать!
    • DarkneZ
    • Регистрация: 19.11.2009
    • Репутация: (0|0|0)
    • 30 января 2010 17:08
    • 21
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 156
  • Публикаций: 2
  • ой герой =)
    4webing.Ru - место, для настоящего вебмастера

    да... вобще имено для реального веб мастера.... твое понятие о настоящем выбмастире это пару cms которые он скачает у тебя на сайте?)))

    P.s не в обиду;) просто научись принимать и критику, а не только положительные каммменты
    • Dimas-rap
    • Регистрация: 16.08.2008
    • Репутация: (0|0|0)
    • 1 февраля 2010 20:48
    • 22
    ^
  • Группа: User
  • Icq: 9115263
  • Комментариев: 37
  • Публикаций: 5
  • http://portalik.flyfm.net/ , http://mirmobil.com.ua/ , http://magicsearch.pp.ua/ , http://freediz.net/ - мои проекты ;) хотя б уровни нормального уровня выбрал! и веб мастер через Е пишется! ШкольнеГ)
    • DarkneZ
    • Регистрация: 19.11.2009
    • Репутация: (0|0|0)
    • 1 февраля 2010 22:05
    • 23
    ^
  • Группа: User
  • Icq: 819585
  • Комментариев: 102
  • Публикаций: 11
  • DarkneZ,
    выебнулся чтоли?
    Цитата: DarkneZ
    ШкольнеГ)

    на школоту в этом случае более всех смахиваешь ты.. не в обиду, но реально, принимай адекватно критику

    --------------------
    • SKDzR
    • Регистрация: 1.08.2008
    • Репутация: (0|0|0)
    • 1 февраля 2010 23:00
    • 24
    ^
  • Группа: User
  • Icq: 9115263
  • Комментариев: 37
  • Публикаций: 5
  • критикуете не то что надо! вас только можно назвать обсерателями а не школьниками!
    • DarkneZ
    • Регистрация: 19.11.2009
    • Репутация: (0|0|0)
    • 1 февраля 2010 23:31
    • 25
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 156
  • Публикаций: 2
  • DarkneZ,
    подумаеш опечатался.... в таком уж случаее лучше писать веб-мастеров черед дефис)

    что тебе ненравится в портале??? нормальный варезник уже больше года существует ;)
    Или в magic search? ты типа сможеш скрипт сделать поисковика лучше чем я????
    а фредиз и мирмобил это не мои сайты я просто их админил, а сейчас вобще забил на них...

    Цитата: DarkneZ
    ШкольнеГ)

    Я неотрицаю ;) я в школе учюсь в 9 классе.... но знаний у меня больше чем у тебя...
    • Dimas-rap
    • Регистрация: 16.08.2008
    • Репутация: (0|0|0)
    • 2 февраля 2010 07:04
    • 26
    ^
  • Группа: User
  • Icq: 9115263
  • Комментариев: 37
  • Публикаций: 5
  • я ж не спорю!)) умник)
    • DarkneZ
    • Регистрация: 19.11.2009
    • Репутация: (0|0|0)
    • 2 февраля 2010 07:45
    • 27
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 156
  • Публикаций: 2
  • wink просто я прокритиковал и ты начал всю эту возьню)))
    потом даже к буквам начал придератся))
    • Dimas-rap
    • Регистрация: 16.08.2008
    • Репутация: (0|0|0)
    • 2 февраля 2010 07:55
    • 28
    ^
  • Группа: User
  • Icq: 9115263
  • Комментариев: 37
  • Публикаций: 5
  • проехали!
    • DarkneZ
    • Регистрация: 19.11.2009
    • Репутация: (0|0|0)
    • 3 февраля 2010 22:29
    • 29
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • блин вы че инета переели люди хаковские,вы че тут рекламшину детскую устроили,
    говно сайты рекламируюте,я свой покажу,у вас яйца в жо.. полезут без хака и модулей,
    По теме пишите гуроны с детсада
    • timona
    • Регистрация: --
    • Репутация: (||)
    • 13 марта 2010 01:06
    • 30
    ^
  • Группа: User
  • Icq: 9115263
  • Комментариев: 37
  • Публикаций: 5
  • timona,
    поддерживаю!
    • DarkneZ
    • Регистрация: 19.11.2009
    • Репутация: (0|0|0)
    • 22 марта 2010 21:01
    • 31
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • люди помогите у меня проблема установил себе менюшку почти все прикольно,
    но у меня на странице есть рекламный баннер и когда я опускаюсь вниз по странице у меня этот баннер вылазит по верх меню что это может быть
    сайт http://3day.org.ua/ посмотрите
    • 3day.org.ua
    • Регистрация: --
    • Репутация: (||)
    • 30 апреля 2010 20:36
    • 32
    ^
  • Группа: User
  • Icq: 9115263
  • Комментариев: 37
  • Публикаций: 5
  • Наш сайт перехал! Теперь официальные релизы будут на stopmod.ru!
    • DarkneZ
    • Регистрация: 19.11.2009
    • Репутация: (0|0|0)
    • 25 августа 2010 08:49
    • 33
    ^
    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.