..


Рекламные ссылки

JQuery: выпадающее меню со слайд-эффектом

Статья, написанная Максом Босси
Страница 1 из 2

В этой короткой статье я представляю свою JQuery плагин для создания простой, но хороший, выпадающее меню (выпадающее меню) со слайд-эффектом. На самом деле, я должен быть честным, это еще не все мои работы ... моя работа, по сути, является на самом деле переработки этот плагин , что я позволил оптимизировать и расширить, добавив в самом деле, эффект слайдов (раскручивание).

Давайте посмотрим, как реализовать выпадающем меню

Во-первых, конечно, мы должны включить JQuery в нашу веб-страницу: 

 



 <script type="text/javascript" src="jquery.js"> </ SCRIPT>

Без этого мы должны создать в теле документа (<body> ...</ тела>), наше меню, которое состоит из маркированного списка, в котором Есть и другие списки (представляющих сухожилие, которое является "развернул" Наведите на пункт матери). Вот пример кода: 






 <ul id="mrwddm">



  



 <li> <a href="/"> cross-harmony.com </> </ LI>



  



 <li> <a href="#"> JavaScript </>



    



 <ul>



      



 <li> <a href="/javascript/guide/"> Руководство </ A> </ LI>



      



 <li> <a href="/javascript/articoli/"> Статьи </> </ LI>



      



 <li> <a href="/javascript/faq/"> FAQ </ A> </ LI>



    



 </ UL>



  



 </ Li>



  



 <li> <a href="#"> Писание </>



    



 <ul>



      



 <li> <a href="/script/applet-java/"> Java-апплеты </> </ LI>



      



 <li> <a href="/script/javascript/"> JavaScript </ A> </ LI>



      



 <li> <a href="/script/script-php/"> PHP </ A> </ LI>



      



 <li> <a href="/script/script-aspnet/"> ASP.Net </> </ LI>



    



 </ UL>



  



 </ Li>



  



 <li> <a href="http://forum.cross-harmony.com/"> Форум </ A> </ LI>



  



 <li> <a href="http://blog.cross-harmony.com/"> блог </> </ LI>



  



 <li> <a href="http://tools.cross-harmony.com/"> Сервис </> </ LI>







 </ UL>

Наше меню должно быть, конечно, соответствующим образом стилизован. Для этого просто добавьте эти строки в стиле код листов CSS: 






 ул # {mrwddm поле: 40px 0px 20px 0px; обивка: 0px;}







 # {Mrwddm ли плавать: слева; дисплей: встроенный; список-стиль: нет;}







 # Mrwddm их {отображения: блок; обивка: 3px 10px; поле: 0px; текст-отделка: нет; пробелами: Nowrap; фон: # EEEEEE;}







 # Mrwddm них: наведите {фон: # CCCCCC; цвет: # FFFFFF;}







 # Mrwddm их ул {мин-ширина: 120px; поле: 3px 0px 0px 0px; обивка: 0px; позицию: абсолютная; г-индекс: 999, видимость: скрытый; дисплей: нет;}







 # Mrwddm их ул Li {плавать: нет; дисплей: встроенный;}







 # Mrwddm их ул Li {обивка: 5px 3px; фон: # EEEEEE; цвет: # 666666;}







 # Mrwddm их ул Li: наведите {фон: # CCCCCC; цвет: # ff6600}

В той же категории ...
E-Learning
CSS (курс) CSS (курс)
Веб-дизайн и доступность в соответствии с W3C CSS и XHTML. Начиная от 29 €.
HTML (курс) HTML (курс)
Язык разметки для веб от 29 €.
Javascript (курс) Javascript (курс)
Полное руководство для сценариев на стороне клиента. С 39 €.
Рекламные ссылки