| Главная » Статьи » Веб дизайнеру » Меню |
Боковое выдвигающееся меню на CSS и jQuery.
Новый удивительный слайд из меню для вашего сайта. Навигация будет почти скрыта - элементы только выскользнуть, когда пользователь наводит на площади рядом с ними. Это дает прекрасный эффект и с помощью этой техники можно сэкономить место на вашем сайте. Пункты будут полупрозрачными это означает, что содержание под ними не будет полностью скрыт. Установка. 1. HTML Вставьте данный код в Главная - Управление дизайном - Редактирование шаблонов - Страницы сайта (замените ссылки). <ul id="navigation"> <li class="home"><a title="Home" href="http://i-love-ucoz.ru/></a></li> <li class="about"><a title="About" href="http://i-love-ucoz.ru/></a></li> <li class="search"><a title="Search" href="http://i-love-ucoz.ru/></a></li> <li class="photos"><a title="Photos" href="http://i-love-ucoz.ru/></a></li> <li class="rssfeed"><a title="Rss Feed" href="http://i-love-ucoz.ru/></a></li> <li class="podcasts"><a title="Podcasts" href="http://i-love-ucoz.ru/></a></li> <li class="contact"><a title="Contact" href="http://i-love-ucoz.ru/></a></li> </ul> И эту часть кода в верх страницы, между тегами <HEAD> </HEAD> <script type="text/javascript" src="http://i-love-ucoz.ru/menu1/jquery-1.3.2.js"></script> 2. CSS А код ниже в "Таблица стилей (CSS)" ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 10px; left: 0px; list-style: none; z-index:9999; } ul#navigation li { width: 100px; } ul#navigation li a { display: block; margin-left: -2px; width: 100px; height: 70px; background-color:#CFCFCF; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; -moz-border-radius:0px 10px 10px 0px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-top-right-radius: 10px; /*-moz-box-shadow: 0px 4px 3px #000; -webkit-box-shadow: 0px 4px 3px #000; */ opacity: 0.6; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); } ul#navigation .home a{ background-image: url(http://i-love-ucoz.ru/menu1/home.png); } ul#navigation .about a { background-image: url(http://i-love-ucoz.ru/menu1/id_card.png); } ul#navigation .search a { background-image: url(http://i-love-ucoz.ru/menu1/search.png); } ul#navigation .podcasts a { background-image: url(http://i-love-ucoz.ru/menu1/ipod.png); } ul#navigation .rssfeed a { background-image: url(http://i-love-ucoz.ru/menu1/rss.png); } ul#navigation .photos a { background-image: url(http://i-love-ucoz.ru/menu1/camera.png); } ul#navigation .contact a { background-image: url(http://i-love-ucoz.ru/menu1/mail.png); } Готово! | |
 Просмотров: 2372 Комментарии: 6
| Теги:
 Рейтинг: 5.0/1 |
| Всего комментариев: 2 | |
|
| |
I Love uCoz |
| Разделы |
| Реклама |
| LParty.ru - лучшие подарки и ведущие для Вашего праздника! |
|
|
