01 авг 2010
Выпадающее меню для DLE
Ares Категория: DATALIFE ENGINE » Хаки
У нас вы можете скачать бесплатно Выпадающее меню для DLE .

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


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

Название хака: Выпадающее меню
Версия DLE: 8.3 (будет работать на версии и ниже)
Проверен: Opera, IE, Mozilla


Установка:

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 заменять его не следует!


Внимание! У вас нет прав для просмотра скрытого текста.













Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Makc7474 | 4 августа 2010 05:27 | (0|0)
  • Группа: Посетители |
  • Комментарий: 1 (ссылка)

щя попробуем

не фигня автору -10000000000000000

slipknot123metal | 23 февраля 2011 20:07 | (0|0)
  • Группа: Посетители |
  • Комментарий: 2 (ссылка)

Makc7474, тут есть видео урок, скачай его и будешь сам такое делать.

wiillow | 27 февраля 2011 11:13 | (0|0)
  • Группа: Посетители |
  • Комментарий: 3 (ссылка)

На картинке другое меню чем на деле!

Makc7474 | 22 мая 2011 00:32 | (0|0)
  • Группа: Посетители |
  • Комментарий: 4 (ссылка)

4ipa, а попотробнее

lol | 19 июня 2012 18:24 | 0

А на версии 9.6 будет работать?

Airat01 | 11 августа 2012 19:24 | (0|0)
  • Группа: Посетители |
  • Комментарий: 6 (ссылка)

Отлично! Спасибо11

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