Question

我正在开展一个项目，我稍后可能会在我的信息技术课程中使用它。我一直在尝试创建一个水平下拉菜单，但无法找到一种方法。所以....如果有人能够提供一个这样的菜单的例子来添加到我的网站，那就太好了：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

Answer 1

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>

创建水平下拉菜单

1 个答案: