prowebber.ru - Тут есть все для настоящих вебмастеров

Мы в твиттере Наша страничка на FaceBook! Сообщество вебмастеров в VK Мы в телеграме!

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

Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Выпадающее меню.

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

Данный урок подготовлен для Вас командой сайта: ruseller.com
Источник урока: tympanus.net
Реализации для dle DarkneZ
Название хака: Выпадающее меню
Версия DLE: 8.3 и ниже
Проверен: Opera, IE, Mozilla

1. Зайти в папку с Вашим шаблоном. Открыть файл main.tpl. После тега вставить:
<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 заменять его не следует!





Отредактировал 5Nizza - 7 февраля 2010
Причина: 5Nizza аФтор детектед )
0

Просмотры: 20647 :: Комментарии (25) :: :: Нужна помощь? Задайте вопрос на форуме ::
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1Mr.Fresh

  • 7 февраля 2010 17:29
  • Регистрация: 21.11.2009
  • ICQ: 4882710
  • Комментариев: 341
http://4webing.ru

0

#2chak

  • 7 февраля 2010 17:38
  • Регистрация: 3.01.2010
  • ICQ: 8528342
  • Комментариев: 446
  • Выкл.
Mr.Fresh,
А ну да, ступил. Спасибо!

0

#3nsdss

  • 7 февраля 2010 17:48
  • Регистрация: 10.01.2010
  • ICQ: --
  • Комментариев: 457
Гы. Прикольно. Сходил на сайт, погрался. даже и незнаю, устанавливать или нет biggrin
Во-во, поигрался еще, и придумал, точнее вспомнил .КТо сделает что бы ТОЧНО также но сбоку поазывалась форма типа вы еще не с нами? зарегистрируйтесь плиз и т.п. Ну думаю, что вы поняли о чем я

--------------------

0

#45Nizza

  • 7 февраля 2010 18:08
  • Регистрация: 22.09.2009
  • ICQ: --
  • Комментариев: 343
ph34r в наглую реклама сайта ... это с русселера.. и наглое присуждение авторства себе ... имхо уже не уважение вызывает diablo

0

#5DarkneZ

  • 7 февраля 2010 18:08
  • Регистрация: 13.10.2009
  • ICQ: 9115263
  • Комментариев: 118
Жду как всегда обливаний! типа новость с..ил! давайте не скупитесь!))

--------------------

0

#6ТорЧок

  • 7 февраля 2010 18:15
  • Регистрация: 5.01.2010
  • ICQ: --
  • Комментариев: 247
DarkneZ,
А ты хочешь, чтобы тебя хвалили за то, что присвоил чужой труд?! dash

--------------------

0

#75Nizza

  • 7 февраля 2010 18:25
  • Регистрация: 22.09.2009
  • ICQ: --
  • Комментариев: 343
DarkneZ,
когда ты реально что нить со временем сделаешь хорошее сам и какой нить олень это присвоит думаю тебе будет не приятно mad и ты будешь так же возмущаться.. это делал не я .. но не люблю присуждения авторства себе mad

0

#8DarkneZ

  • 7 февраля 2010 18:38
  • Регистрация: 13.10.2009
  • ICQ: 9115263
  • Комментариев: 118
Ну вот другое дело! давайте жоще! аааа! кайфую!!!!!! yahoo
З,Ы. я не горил что я атор! я всего лишь написал подробную установку на ДЛЕ!

--------------------

0

#95Nizza

  • 7 февраля 2010 18:42
  • Регистрация: 22.09.2009
  • ICQ: --
  • Комментариев: 343
Цитата: DarkneZ
Автор идеи и реализации DarkneZ

это что пушкин чтоли ?

0

#10ТорЧок

  • 7 февраля 2010 18:43
  • Регистрация: 5.01.2010
  • ICQ: --
  • Комментариев: 247
5Nizza,
crazy У этого мазахиста полным ходом идёт раздвоение личности.

--------------------

0

#11Bagner

  • 7 февраля 2010 18:45
  • Регистрация: 27.11.2009
  • ICQ: --
  • Комментариев: 308
5Nizza,

Ну блин ... начал спор ;) Ну присудил себе авторство, пусть радуется. Нам то какое дело !? Лишь бы хак людям нравился.

--------------------

0

#12Mr.Fresh

  • 7 февраля 2010 19:10
  • Регистрация: 21.11.2009
  • ICQ: 4882710
  • Комментариев: 341
всё тему закрыли ... качаем и радуемся biggrin
всё флуд будет удаляться ..
а если по делу то вообще вещь красивая
комент отредактил ©5Nizza =)



--------
ЫЫЫЫЫЫЫЫы хДД

0

#13explOit

  • 7 февраля 2010 20:46
  • Регистрация: 16.11.2009
  • ICQ: --
  • Комментариев: 271
Цитата: DarkneZ
я всего лишь написал подробную установку на ДЛЕ!

что ты там написал подробного? тупо списал, на руселлере точно также,просто ты написал пути где лежат файлы, но ты посчитал что этого достаточно что бы присоить себе чужой труд...

--------------------

0

#14DarkneZ

  • 7 февраля 2010 21:12
  • Регистрация: 13.10.2009
  • ICQ: 9115263
  • Комментариев: 118
идеи и реализации написания кода дле!

--------------------

0

#155Nizza

  • 7 февраля 2010 21:12
  • Регистрация: 22.09.2009
  • ICQ: --
  • Комментариев: 343
explOit,
всё тему прикрыли ) я новость отреактил ) щас всё в порядке ph34r

0

#16tlex

  • 8 февраля 2010 01:41
  • Регистрация: 9.10.2009
  • ICQ: --
  • Комментариев: 32
так кто нить может сделать, что б так же, тока сбоку

0

#17nsdss

  • 8 февраля 2010 07:53
  • Регистрация: 10.01.2010
  • ICQ: --
  • Комментариев: 457
Цитата: tlex
P.S. если у вас присутствует файл style.css заменять его не следует!

Уже есть на сайте, Сейчас промодерируют и будет. Почитаешь.

--------------------

0

#18ferno

  • 8 февраля 2010 19:17
  • Регистрация: 8.02.2010
  • ICQ: --
  • Комментариев: 15
Ставил, не понравилось! bo

--------------------

0

#19garri83

  • 9 февраля 2010 12:40
  • Регистрация: 27.11.2009
  • ICQ: --
  • Комментариев: 30
я давно такое видел мне понравилась и пользуюсь до сих пор

0

#20Zw1T

  • 9 февраля 2010 16:15
  • Регистрация: 4.02.2010
  • ICQ: 479187850
  • Комментариев: 47
Отличная весчЬ yahoo
А как моно вниз поставить ?

0
1 2
Предыдущая    Следующая
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

SkripTers.biz - Снова с вами

https://culabra.ru — Блог вЭбмастЭра

DCOReARTs.COM - Услуги веб-дизайна и графики

Max-energy.top - Заработок на электросчетчиках;)

Skripters.info - все для вебмастера. Только эксклюзивный контент.

Наши баннеры
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Нужна ли категория "Интернет магазины"?

Да
Нет

Архив новостей
Апрель 2018 (396)
Март 2018 (498)
Февраль 2018 (409)
Январь 2018 (140)
Декабрь 2017 (26)
Ноябрь 2017 (7)

Последние комментарии:

  • Hosting Ukraine
  • Яндекс.Метрика

Искать людей

Ваши переписки