Новое меню для сайтов системы ucoz
20.11.2010, 19:30

# Вставляем JavaScript файл.
Ну начнём с самого главного, без чего наше меню работать никак не будет. Давайте между и вставим 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 код.
А теперь вставим 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;}

Демо

Категория: Скрипты для uCoz | Добавил: Marselle
Просмотров: 353 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]