| 20.11.2010, 19:30 | |
| # Вставляем JavaScript файл. Code <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> # Вставляем HTML код. Code <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> # Вставляем новые классы в CSS. Code body{font-family:Arial, Helvetica, sans-serif; font-size:13px; background:#FFFFFF;} 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;} | |
|
| |
| Просмотров: 353 | Загрузок: 0 | | |
| Всего комментариев: 0 | |