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

Рейтинг:0.0

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

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

Code

Код HTML (между и )

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 (так же как и выше, но желательно перед )

Code

Код 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;
  }