Офис НП 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
Искал я себе вертикальное выпадающее, а если быть точнее- плавно выезжающее меню с минимальными изменениями в коде и наткнулся на следующее решение. Нам потребуется: вставка небольшого кода в header сайта, небольшие изменения в коде html, ну и стили. Если библиотека JQuery у тебя уже подключена, то опусти первую строчку.
Как ты заметил, я привязал наш выпадающий список непосредственно к определенному классу .osn_cat (ты можешь назвать класс как угодно). Сделано это для того, чтобы не было конфликтов с другими элементами на страницах твоего проекта.
Далее- сама разметка. Все весьма просто: при клике на "+" наш список откроется, при повторном нажатии- свернется:
Как видишь, все весьма просто. Количество разворачиваемых пунктов не ограничено, так что можешь не стесняться.
Ну и в конце- сам стиль для вывода нашего выпадающего списка:
Вот и все, дорогой читатель. Как и ранее: есть вопросы- пиши в комментариях. Хочешь поблагодарить- лишь подумай об этом, я умею читать мысли... Всего доброго!
Код: 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 : 250 px ; margin : 6 px auto ; background : #fff ; border : 1 px solid #d1d1d1 ; padding : 4 px ; font-family : Georgia , Helvetica , sans-serif ; -moz- border-radius : 5 px ; -webkit- border-radius : 5 px ; -moz- box-shadow : 0 0 10 px #ddd ; -webkit- box-shadow : 0 0 10 px #ddd ; } .osn_cat h 3 { border-radius : 5 px ; -o- border-radius : 5 px ; -moz- border-radius : 5 px ; -webkit- border-radius : 5 px ; padding : 5 px ; 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 : 1 px solid #d1d1d1 ; color : #c1c1c1 ; font-size : 110 % ; font-weight : bolder ; text-shadow : 1 px 1 px 0 px #fff ; margin : 0 ; } .osn_cat h 3 span { float : right ; cursor : pointer ; } .osn_cat h 3 span: hover { text-shadow : 0 0 3 px #a1eeff ; } .osn_cat ul { padding : 5 px ; word-wrap : break-word ; margin : 0 ; } .osn_cat ul li { font-weight : bold ; list-style-type : square ; list-style-position : inside ; color : #a1a1a1 ; padding : 5 px ; } |
Вот и все, дорогой читатель. Как и ранее: есть вопросы- пиши в комментариях. Хочешь поблагодарить- лишь подумай об этом, я умею читать мысли... Всего доброго!
Понравилась статья?
Метки для данной статьи
Похожие статьи
Заголовок
Категория
Просмотров
Поделиться:
Последние активные темы форума
Темы | Просмотров | Ответов | Последние сообщения |