Простое выпадающее меню на JQuery и CSS


Простое выпадающее меню на JQuery и CSS

2440
10 из 10
Проголосовало: 6






Это очень простое выпадающее меню, обратите внимание на то, что строк в коде немного. Это не относится к CSS, тут кода предостаточно. Простое выпадающее меню на JQuery и CSS работает во всех браузерах, это кроссбраузерное выпадающее меню на JQuery. Стиль продуман для браузеров Webkit, в IE, например, меню выглядит немного больше и смотрится чуть хуже.

Ну меньше слов, больше дела...перейдём к установке:
Подключение JQuery (между <head> и </head>) вставьте:

Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


Код HTML (между <body> и </body>)

Code
<div class="dropdown">  
  <a class="account">Моя страница</a>  

  <div class="submenu">  
  <ul class="root">  
  <li><a href="#">Профиль</a></li>  
  <li><a href="#">Поиск</a></li>  
  <li><a href="#">Настройки</a></li>  
  <li><a href="#">Выход</a></li>  
  </ul>  
  </div>  

  </div>


Код JavaScript (так же как и выше, но желательно перед </body>)

Code
<script type="text/javascript" >  
  $(document).ready(function()  
  {  

  $(".account").click(function()  
  {  
  var X=$(this).attr('id');  
  if(X==1)  
  {  
  $(".submenu").hide();  
  $(this).attr('id', '0');  
  }  
  else  
  {  
  $(".submenu").show();  
  $(this).attr('id', '1');  
  }  

  });  

  //Mouse click on sub menu  
  $(".submenu").mouseup(function()  
  {  
  return false  
  });  

  //Mouse click on my account link  
  $(".account").mouseup(function()  
  {  
  return false  
  });  

  //Document Click  
  $(document).mouseup(function()  
  {  
  $(".submenu").hide();  
  $(".account").attr('id', '');  
  });  
  });  
  </script>


Код CSS (в ваши css стили)

Code
.dropdown  
  {  
  color: #555;  
  margin: 3px -22px 0 0;  
  width: 143px;  
  position: relative;  
  height: 17px;  
  text-align:left;  
  }  
  .submenu  
  {  
  background: #fff;  
  position: absolute;  
  top: -12px;  
  left: -20px;  
  z-index: 100;  
  width: 135px;  
  display: none;  
  margin-left: 10px;  
  padding: 40px 0 5px;  
  border-radius: 6px;  
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);  
  }  
  .dropdown li a  
  {  
  color: #555555;  
  display: block;  
  font-family: arial;  
  font-weight: bold;  
  padding: 6px 15px;  
  cursor: pointer;  
  text-decoration:none;  
  }  

  .dropdown li a:hover  
  {  
  background:#155FB0;  
  color: #FFFFFF;  
  text-decoration: none;  
  }  
  a.account  
  {  
  font-size: 11px;  
  line-height: 16px;  
  color: #555;  
  position: absolute;  
  z-index: 110;  
  display: block;  
  padding: 11px 0 0 20px;  
  height: 28px;  
  width: 121px;  
  margin: -11px 0 0 -10px;  
  text-decoration: none;  
  background: url(icons/arrow.png) 116px 17px no-repeat;  
  cursor:pointer;  
  }  
  .root  
  {  
  list-style:none;  
  margin:0px;  
  padding:0px;  
  font-size: 11px;  
  padding: 11px 0 0 0px;  
  border-top:1px solid #dedede;  
  }
Автор публикации: Загрузка
Загрузка
doc74, это его n материал
  • Всего комментариев: 8

Insider
-3
Insider написал: Написано 23 Июня 2012 в 17:16
Комментарий №5
Источник [удалено]

Вовчик
+2
Вовчик написал: Написано 23 Июня 2012 в 17:22
Комментарий №7
Источником не является тот сайт, откуда был скопирован материал... У них источник не стоит, значит он не источник!
И еще, прочти правила, ссылки на сторонние ресурсы надо засовывать под спойлер, поэтому первое устное...

S@Nek
+2
S@Nek написал: Написано 22 Июня 2012 в 23:21
Комментарий №1
демо в стуудию

Вовчик
+1
Вовчик написал: Написано 22 Июня 2012 в 23:23
Комментарий №2
Установи и посмотри, а то вообще скоро обленитесь!

POZ1TIV4IK
0
POZ1TIV4IK написал: Написано 23 Июня 2012 в 04:50
Комментарий №3
Вовчик + тебе

S@Nek
-3
S@Nek написал: Написано 23 Июня 2012 в 16:18
Комментарий №4
вова, [мат] мне устанавливать? и при чём тут лень? у меня много других дел... angry

Вовчик
+2
Вовчик написал: Написано 23 Июня 2012 в 17:20
Комментарий №6
Устное за мат.

Это какие же у тебя дела? Мир спасаешь что ли, или с президентом встреча? Вот распиши мне пожалуйста весь свой день, с момента как просыпаешься, до того как засыпаешь!
И еще, ты вот мне наверно дольше отвечал, мог вместо того что бы писать мне ответ, установить на своем тест сайте и посмотреть демо...

doc74
0
doc74 написал: Написано 23 Июня 2012 в 21:30
Комментарий №8
лень dry

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 8
    Гостей: 7
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: