Офис НП 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 Добавлено  17-05-2013 08:19 17 Май 2013 08:19:38 12289  Прочтений 12289 Прочтений  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 Вопрос по переделке bb-кода
PHP, MySQL
424 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
3311 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
5589 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
3200 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
34274 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
2583 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
4475 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
4997 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
1845 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
6878 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
2946 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
4295 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
19555 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
2230 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
9711 13 Pisatel
03. апреля 2015