Блог

Главная - Вопросы по программированию - Выпадающее меню с jQuery (прогрессивное улучшение)

Выпадающее меню с jQuery (прогрессивное улучшение)

#jquery

#jquery

Вопрос:

Я надеялся, что вы сможете мне с этим помочь… Я хочу создать выпадающее меню с помощью jQuery, и оно отлично работает с javascript, включенным в браузере. Теперь я хочу, чтобы это работало, когда javascript отключен, и я не совсем уверен, как это сделать.

У меня есть код здесь, чтобы вы могли убедиться сами.

Моя HTML-страница со списками:

 <!DOCTYPE HTML>
<html>
    <head>
        <script src="jquery-1.6.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="p6.js"></script>
    </head>
    <body>
      <ul id="menu">

        <li><a href="#">What's new?</a>
          <ul class="active">
        <li><a href="#">Weekly specials</a></li>
        <li><a href="#">Last night's pics!</a></li>
        <li><a href="#">Users' comments</a></li>
          </ul>
        </li>

        <li><a href="#">Member extras</a>
          <ul>
        <li><a href="#">Premium Celebrities</a></li>
        <li><a href="#">24-hour Surveillance</a></li>
          </ul>
        </li>

        <li><a href="#">About Us</a>
          <ul>
        <li><a href="#">Privacy Statement</a></li>
        <li><a href="#">Terms and Conditions</a></li>
        <li><a href="#">Contact Us</a></li>
          </ul>
        </li>

      </ul>
    </body>
</html>

и мой файл .js

 $(document).ready(function(){

    $('#menu > li > ul').hide().click(function(e){
    e.stopPropagation();
    });

    $('#menu > li').toggle(function(){
    $(this).find('ul').slideDown();
    },function(){
    $(this).find('ul').slideUp();
    });

});

Спасибо, что уделили мне время!

Любая помощь будет оценена!

J

Ответ №1:

Вы можете сделать это только с помощью html и CSS для более современных браузеров, используя псевдокласс «hover» (т. Е. 6 и аналогичные не учитывают псевдокласс hover, за исключением тегов a). Что-то вроде этого:

 ul#menu li ul {
    display:none
}
ul#menu:hover li ul {
    display:block
}

Комментарии:

1. Более подробная информация о меню CSS в этой статье alistapart: alistapart.com/articles/horizdropdowns

Ответ №2:

Если javascript отключен, единственным решением для выпадающего меню является использование <select> или: событие наведения и попытка настроить его с помощью css

JS отключен == нет Javascript, нет Jquery, только обычный HTML и CSS