Офис НП AMWAY в Ярославле
Офис Амвей в Ярославле
→ На карте Офис AMWAY в ЯрославлеПрием и выдача заказов, презентация продукции Амвей, мастер–классы, вопросы по бизнесу Amway:
●Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
●Телефон: +7 (920) 112-00-91
●Email: matyxho@mail.ru
●Сайт: https://www.amway.ru/user/lebedem
●Визитка: http://yar.meweb.ru
Иерархия статей
Статьи » HTML, CSS, JS » Простой красивый выпадающий список на JQuery и CSS
Сниппет
Рассмотрим реализацию самого простого выпадающего списка или выпадающего меню на JQuery + CSS
Простой красивый выпадающий список на JQuery и CSS
Опубликовал Pisatel Pisatel Добавлено 17-05-2013 08:19 17 Май 2013 08:19:38 22884 Прочтений 22884 Прочтений
Обновлено: 25-04-2016 11:11 Обновлено: 25 апреля 2016 11:11:18  printer
Искал я себе вертикальное выпадающее, а если быть точнее- плавно выезжающее меню с минимальными изменениями в коде и наткнулся на следующее решение. Нам потребуется: вставка небольшого кода в header сайта, небольшие изменения в коде html, ну и стили. Если библиотека JQuery у тебя уже подключена, то опусти первую строчку.
Код: HTML
!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
<script type="text/javascript" src="scripts/jquery.js"></script>
 
<script type="text/javascript">
    $(document).ready(function() {
       $(".osn_cat ul").hide();
       $(".osn_cat ul li : odd " ) .css("background-color", "#efefef");
       $(".osn_cat h3 span").click (function(){
       $(this).parent().next().slideToggle();
   });
});
</script>
 
</head>

Как ты заметил, я привязал наш выпадающий список непосредственно к определенному классу .osn_cat (ты можешь назвать класс как угодно). Сделано это для того, чтобы не было конфликтов с другими элементами на страницах твоего проекта.
Далее- сама разметка. Все весьма просто: при клике на "+" наш список откроется, при повторном нажатии- свернется:
Код: HTML
!
1
2
3
4
5
6
7
8
<div class="osn_cat">
<h3>Выпадающее меню<span class="expand"> + </span></h3>
<ul>
<li><a href="test1">Ссылка 1</a></li>
<li><a href="test2">Ссылка 2</a></li>
<li><a href="test3">Ссылка 3</a></li>
</ul>
</div>

Как видишь, все весьма просто. Количество разворачиваемых пунктов не ограничено, так что можешь не стесняться.
Ну и в конце- сам стиль для вывода нашего выпадающего списка:
Код: CSS
!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.osn_cat {
width: 250px;
margin: 6px auto;
background: #fff;
border: 1px solid #d1d1d1;
padding: 4px;
font-family: Georgia, Helvetica, sans-serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 0 10px #ddd;
-webkit-box-shadow: 0 0 10px #ddd;
}
.osn_cat h3 {
border-radius: 5px;
-o-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px;
background-color: #ccc;
background-image: linear-gradient(top, #ccc, #eee);
background-image: -webkit-linear-gradient(top, #ccc, #eee);
background-image: -moz-linear-gradient(top, #ccc, #eee);
background-image: -o-linear-gradient(top, #ccc, #eee);
background-image: -ms-linear-gradient(top, #ccc, #eee);
border: 1px solid #d1d1d1;
color: #c1c1c1;
font-size:110%;
font-weight: bolder;
text-shadow: 1px 1px 0px #fff;
margin: 0;
}
.osn_cat h3 span {
float: right;
cursor: pointer;
}
.osn_cat h3 span:hover{
text-shadow: 0 0 3px #a1eeff;
}
.osn_cat ul {
padding: 5px;
word-wrap: break-word;
margin: 0;
}
.osn_cat ul li {
font-weight: bold;
list-style-type: square;
list-style-position: inside;
color: #a1a1a1;
padding: 5px;
}

Вот и все, дорогой читатель. Как и ранее: есть вопросы- пиши в комментариях. Хочешь поблагодарить- лишь подумай об этом, я умею читать мысли... Всего доброго!
Понравилась статья?
Метки для данной статьи
Теги:  #jquery #выпадающий список #выпадающее меню #html #css #css3 #javascript #js 
Похожие статьи
Заголовок
Категория
Просмотров
8180
10617
36704
11718
29316
Поделиться:   
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения