Создание горизонтального выпадающего меню

Я работаю над проектом, который позже я смогу использовать в своей курсовой работе по информационным технологиям. Я пытаюсь создать горизонтальное раскрывающееся меню, но не могу понять, как это сделать. Итак ... если бы кто-нибудь мог предоставить мне пример такого меню для добавления на мой сайт, это было бы здорово: D

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'/>

<link rel="stylesheet" type="text/css" href="main.css" />
<link href='http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope' rel='stylesheet' type='text/css'>

</head>
<body>



<div id="header" style="font-family: A Sensible Armadillo; font-size: 28px; font-weight: 500;">
    <div id="nav">
        <a id="navicon" href="#menu">&#9776;Menu</a>
        <a id="dropdown" href="#about">About</a>
        <a id="dropdown" href="#portfolio">Portfolio</a>
        <a id="dropdown" href="#contact">Contact</a>
    </div>
</div>

<div id="page-wrap">

    <div id="page1">
        <a name="about"></a>
        <div class="page-padding"></div>

    </div>

    <div id="page2">
        <a name="portfolio"></a>
        <div class="page-padding"></div>

    </div> 

    <div id="page3">
        <a name="contact"></a> 
        <div class="page-padding"></div>

    </div>

</div>

<script     src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
  function filterPath(string) {
    return string
      .replace(/^//,'')  
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')  
      .replace(//$/,'');
  }
  $('a[href*=#]').each(function() {
    if ( filterPath(location.pathname) == filterPath(this.pathname)
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
      var $targetId = $(this.hash), $targetAnchor = $('[name=' +     this.hash.slice(1) +']');
      var $target = $targetId.length ? $targetId : $targetAnchor.length ?     $targetAnchor : false;
       if ($target) {
         var targetOffset = $target.offset().top;
         $(this).click(function() {
           $('html, body').animate({scrollTop: targetOffset}, 2000);
           return false;
         });
      }
    }
  });
});
</script>

</body>
</html>

Выше мой текущий HTML-код, дайте мне знать, если кто-нибудь захочет, чтобы я предоставил им свою таблицу стилей.

Заранее благодарим за любые ответы, Cro

javascript,jquery,html,css,

-2

Ответов: 1

0 принят

У Bootstrap есть поддержка этого, а также тонна других замечательных навигаторов, вы можете проверить это здесь http://getbootstrap.com/components/#dropdowns

Суть этого будет выглядеть так для вашего кода

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a id="navicon" href="#menu">&#9776;Menu</a></li>
        <li><a id="dropdown" href="#about">About</a></li>
        <li><a id="dropdown" href="#portfolio">Portfolio</a></li>
        <li><a id="dropdown" href="#contact">Contact</a></li>
    </ul>
</div>

вам нужно включить их в свои другие таблицы стилей / javascript

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet"    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
JavaScript, JQuery, HTML, CSS,
Похожие вопросы
Яндекс.Метрика