ПОСМОТРЕТЬ
1. Качаем архив.
2. С помощью Файлового менеджера создаём папку js и заливаем в неё файл jquery
3. Затем создаём папку img и заливаем в неё файл a_bg (если будете использовать
вариант меню с картинкой).
4. Открываем Панель управления --> Страницы сайта и перед тегом </head> вставляемэто:
Code
<script type="text/javascript" src="js/jquery.js"></script>
5. Далее, на этой же странице, перед тегом </body вставляем этот скрипт:
Code
<script type="text/javascript">
$(document).ready(function() {
$("#topnav li").prepend("<span></span>");
$("#topnav li").each(function() {
var linkText = $(this).find("a").html();
$(this).find("span").show().html(linkText);
});
$("#topnav li").hover(function() {
$(this).find("span").stop().animate({
marginTop: "-40"
}, 250);
} , function() {
$(this).find("span").stop().animate({
marginTop: "0"
}, 250);
});
});
</script>
6. Затем открываем Таблицу стилей (CSS) и в самый низ вставляем это:
Code
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fcce61;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #000000;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: url(/img/a_bg.gif) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(/img/a_bg.gif) repeat-x left bottom;
}
7. Затем вставляем на страницу сайта, там где будет ваше меню, один из этих вариантов кода:
Вариант меню без картинки:
Code
<ul id="topnav">
<li><a href="ССЫЛКА НА СТРАНИЦУ САЙТА">ТЕКСТ</a></li>
<li><a href="ССЫЛКА НА СТРАНИЦУ САЙТА">ТЕКСТ</a></li>
<li><a href="ССЫЛКА НА СТРАНИЦУ САЙТА">ТЕКСТ</a></li>
<li><a href="ССЫЛКА НА СТРАНИЦУ САЙТА">ТЕКСТ</a></li>
<li><a href="ССЫЛКА НА СТРАНИЦУ САЙТА">ТЕКСТ</a></li>
<li><a href="ССЫЛКА НА СТРАНИЦУ САЙТА">ТЕКСТ</a></li>
</ul>
Вариант меню с картинкой:
Code
<ul id="topnav" class="v2">
<li><a href="ССЫЛКА НА СТРАНИЦУ САЙТА">ТЕКСТ</a></li>
<li><a href="ССЫЛКА НА СТРАНИЦУ САЙТА">ТЕКСТ</a></li>
<li><a href="ССЫЛКА НА СТРАНИЦУ САЙТА">ТЕКСТ</a></li>
<li><a href="ССЫЛКА НА СТРАНИЦУ САЙТА">ТЕКСТ</a></li>
<li><a href="ССЫЛКА НА СТРАНИЦУ САЙТА">ТЕКСТ</a></li>
<li><a href="ССЫЛКА НА СТРАНИЦУ САЙТА">ТЕКСТ</a></li>
</ul>
