Офис НП 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 Добавлено  17-05-2013 08:19 17 Май 2013 08:19:38 15451  Прочтений 15451 Прочтений  0 Комментариев 0 Комментариев
Обновлено: 25-04-2016 11:11 Обновлено: 25 апреля 2016 11:11:18  printer
Искал я себе вертикальное выпадающее, а если быть точнее- плавно выезжающее меню с минимальными изменениями в коде и наткнулся на следующее решение. Нам потребуется: вставка небольшого кода в header сайта, небольшие изменения в коде html, ну и стили. Если библиотека JQuery у тебя уже подключена, то опусти первую строчку.
Код: HTML
<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
<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
.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;
}



Вот и все, дорогой читатель. Как и ранее: есть вопросы- пиши в комментариях. Хочешь поблагодарить- лишь подумай об этом, я умею читать мысли... Всего доброго!
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Комментарии
Нет комментариев.
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
12589 33 promask
27. апреля 2019
folder Вопрос по переделке bb-кода
PHP, MySQL
3154 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
12848 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
7530 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
6703 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
51196 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
3899 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
7869 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
8805 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
2909 0 Pisatel
15. июня 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
5452 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
7401 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
39555 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
3593 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
13367 13 Pisatel
03. апреля 2015