Автор идеи и реализации 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.ru4webing.ru_nav.rar [63.21 Kb] (скачиваний файла: 552)
