Здравствуйте. В этом уроке мы займемся созданием оригинального меню с выпадающим списком, примерно такого, как используется в сервисе Flickr. Ниже вы можете просмотреть демонстрацию получившегося меню и скачать исходные файлы урока:
Шаг 1. JavaScript, необходимый для работы меню.
Для начала, между тегами <head> и </head>, мы поместим javascript-код, который нужен для правильной работы самого меню:
JavaScript:
<script language="javascript">
function showMenu(id_menu){
var my_menu = document.getElementById(id_menu);
if(my_menu.style.display=="none" || my_menu.style.display==""){
my_menu.style.display="block";
} else {
my_menu.style.display="none";
}
}
function swapImage(idStatus){
if(idStatus==0){
document.arrow_profile.src ="arrow_hover.png";
} else if(idStatus==1){
document.arrow_profile.src ="arrow_select.png";
} else if(idStatus==2){
document.arrow_profile.src ="arrow.png";
}
}
</script>
Здесь, как Вы можете видеть, мы использовали обыкновенную javascript-функцию showMenu(), которая позволяет нам сделать красивый выпад меню.
Шаг 2. HTML-конструкция меню.
Теперь, во втором пункте нашей работы, мы должны составить html-конструкцию нашему будущему меню. Ниже Вы можете наблюдать пример такой конструкции с примененными уже к ней javascript-функциями, которые мы использовали в первом шаге:
HTML:
<div id="container">
<ul>
<li class="menu" id="profile"><span><a href="index.html">Профиль</a> <img src="arrow.png" name="arrow_profile" width="18" height="15" align="top" class="arrow" onClick="javascript:showMenu('id_menu_profile')" onmouseup="javascript:swapImage(1)" onmouseover="javascript:swapImage(0)" onmouseout="javascript:swapImage(2)"></span>
<div class="sub_menu" id="id_menu_profile">
<a href="#">Изменить профиль</a>
<a href="#">Контакты</a>
<a href="#">Добавить фото</a>
<a href="#" class="item_line">Invite Пригласить своих друзей</a>
<a href="#">Поддержать проект</a>
<a href="#">Выйти</a> </div>
</li>
</ul>
</div>
Шаг 3. Дизайн меню
А вот и заключительная часть нашего с Вами урока. Здесь нам всего лищь остается придать особый дизайн нашему меню, такой, как на Flickr.com. Для этого мы вернемся с Вами немного назад и между тегами <head> и </head> вставим следующие css-стили:
CSS:
<style type="text/css">
body{font-family:Arial, Helvetica, sans-serif; font-size:13px; background:#FFFFFF;}
#container{margin:0 auto; width:600px;margin-top:30px;}
a:link, a:visited{color:#0066CC; text-decoration:none;}
a:hover{text-decoration:underline;}
ul, li{margin:0; border:0; list-style:none; padding:0;}
ul{border-bottom:dotted 1px #DEDEDE;}
ul{height:21px;}
li{display:inline;}
.menu span{border:solid 1px #EFEFEF; padding:4px 2px 4px 6px; border-bottom:none; margin-right:10px; line-height:18px;}
.menu span a{font-weight:bold;}
.menu span:hover{border:solid 1px #DEDEDE; border-right:1px solid #999999; border-bottom:none;}
.arrow{margin-left:4px; cursor:pointer; }
.sub_menu{display:none; position:relative; border:solid 1px #DEDEDE; border-top:none; border-right:solid 1px #999999; border-bottom:solid 1px #999999; padding:10px; top:2px; width:120px; background:#FFFFFF;}
.sub_menu a:link, .sub_menu a:visited, .sub_menu a:hover{display:block; font-size:11px; padding:4px;}
.item_line{border-top:solid 1px #DEDEDE;}
</style>
Здесь перечислены все стили, которые мы прикрепляли к нашим таблицам, столбцам и строкам.
Заключение.
Ну вот и все! Мы сделали отличное выпадающее меню, причем без помощи jQuery! Надеюсь, что Вам создание данного меню очень понравилось своей простотой и оригинальностью. Спасибо за внимание, жду Ваших комментариев.