如何在不改變效果的情況下在可滾動導航中添加下拉菜單？

我在編輯這個有滾動導航的模板。如何在不改變當前功能的情況下在MEN，WOMEN和Children選項中添加下拉菜單？如何在不改變效果的情況下在可滾動導航中添加下拉菜單？

我嘗試使用下拉類，我遵循getbootstrap.com中的說明，但它仍然不起作用。誰可以幫我這個事？

請有人告訴我如何在本網站的導航上添加下拉菜單。像MEN，WOMEN和Children選項一樣，但不影響滾動功能？這是我的HTML代碼：

<body id="page-top" class="index"> 

<!-- Navigation --> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header page-scroll"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand page-scroll" href="#page-top">Template 1</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="hidden"> 
        <a href="#page-top"></a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#men">MEN</a> 
       </li> 

       </li> 
       <li> 
        <a class="page-scroll" href="#women">WOMEN</a> 
       </li> 

       <li> 
        <a class="page-scroll" href="#children">CHILDREN</a> 
       </li> 

       <li> 
        <a class="page-scroll" href="#contact">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

<!-- Header --> 
<header> 
    <div class="container"> 
     <div class="intro-text"> 
      <div class="intro-lead-in">Welcome </div> 
      <div class="intro-heading" style="font-size: 30px;">LOREM IPSUM SOMETHING</div> 
      <a href="#men" class="page-scroll btn btn-xl">Whaa!?</a> 
     </div> 
    </div> 
</header> 


<section id="men" class="bg-light-gray"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <h2 class="section-heading">Men Is Mortal.</h2> 
       <h3 class="section-subheading text-muted">Isn't he?</h3> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-4 col-sm-6 men-item"> 
       <a href="#menModal1" class="men-link" data-toggle="modal"> 
        <div class="men-hover"> 
         <div class="men-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="img/men/h1.png" class="img-responsive" alt=""> 
       </a> 
       <div class="men-caption"> 
        <h4>heading</h4> 
        <p class="text-muted">caption</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-6 men-item"> 
       <a href="#menModal2" class="men-link" data-toggle="modal"> 
        <div class="men-hover"> 
         <div class="men-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="img/men/h1.png" class="img-responsive" alt=""> 
       </a> 
       <div class="men-caption"> 
        <h4>heading</h4> 
        <p class="text-muted">Caption</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-6 men-item"> 
       <a href="#menModal3" class="men-link" data-toggle="modal"> 
        <div class="men-hover"> 
         <div class="men-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="img/men/h1.png" class="img-responsive" alt=""> 
       </a> 
       <div class="men-caption"> 
        <h4>Heading</h4> 
        <p class="text-muted">Caption</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-6 men-item"> 
       <a href="#menModal4" class="men-link" data-toggle="modal"> 
        <div class="men-hover"> 
         <div class="men-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="img/men/h1.png" class="img-responsive" alt=""> 
       </a> 
       <div class="men-caption"> 
        <h4>heaing</h4> 
        <p class="text-muted">Caption</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-6 men-item"> 
       <a href="#menModal5" class="men-link" data-toggle="modal"> 
        <div class="men-hover"> 
         <div class="men-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="img/men/h1.png" class="img-responsive" alt=""> 
       </a> 
       <div class="men-caption"> 
        <h4>sdfdg</h4> 
        <p class="text-muted">Caption</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-6 men-item"> 
       <a href="#menModal6" class="men-link" data-toggle="modal"> 
        <div class="men-hover"> 
         <div class="men-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="img/men/h1.png" class="img-responsive" alt=""> 
       </a> 
       <div class="men-caption"> 
        <h4>dggdg</h4> 
        <p class="text-muted">Caption</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</section>

這裏在codepen的完整代碼：http://codepen.io/msa208/pen/pJpzBW``

來源

2015-06-26 Shafiul Alam

讓我提醒你，標籤應該是** twitter-bootstrap **而不是** bootstrap **。 Bootstrap是啓動到計算機的程序。 –

你可以有一個選項 - 滾動點擊菜單來定位或顯示下拉菜單？你要哪個？像** [this]（http://codepen.io/kshkrao3/pen/EjoxVG）** –

非常感謝！那就是我想要的！ –

你可以使用這個簡單的jQuery插件來實現你想要什麼。

http://www.smartmenus.org/

這裏是一個插件的demo。

來源

2015-06-26 08:50:08

謝謝！但是我怎樣才能將它添加到頁面？ –

如果你看看演示，它給你如何使用這個插件的說明。您需要添加到頁面的所有內容都以綠色突出顯示。基本上，頂部的CSS和頁面底部的腳本。 –

我已經創建了一支筆來幫助你。 http://codepen.io/costh/pen/YXYPGx –

嘿Shaiful試試這個代碼：

我編輯的pencode編輯它的成功運行按照你的需要。

Codepen鏈接： http://codepen.io/anon/pen/RPxNqB

添加此jQuery代碼：

$(document).ready(function() { 
    $(".navbar-nav > li").click(function() { 
     $('.navbar-nav > li ul').not($(this).children("ul").toggle()).hide(); 
    }); 
});

添加這個CSS代碼：

.navbar-nav > li ul{display:none; position:absolute; padding:0px 15px;} 
.navbar-nav > li ul li{list-style:none;} 
.navbar-default .nav li a{color:#777777;}

，這是你的HTML代碼drodown：

<!-- Navigation --> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header page-scroll"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand page-scroll" href="#page-top">Template 1</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="hidden"> 
        <a href="#page-top"></a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#men">MEN</a> 
       </li> 

       </li> 
       <li> 
        <a class="page-scroll" href="#women">WOMEN</a> 
        <ul><li><a class="page-scroll" href="#children">CHILDREN</a></li> 

        <li><a class="page-scroll" href="#children">CHILDREN</a></li> 
        <li><a class="page-scroll" href="#children">CHILDREN</a></li> 
        <li><a class="page-scroll" href="#children">CHILDREN</a></li> 

        </ul> 
       </li> 

       <li> 
        <a class="page-scroll" href="#children">CHILDREN</a> 
       </li> 

       <li> 
        <a class="page-scroll" href="#contact">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

<!-- Header --> 
<header> 
    <div class="container"> 
     <div class="intro-text"> 
      <div class="intro-lead-in">Welcome </div> 
      <div class="intro-heading" style="font-size: 30px;">LOREM IPSUM SOMETHING</div> 
      <a href="#men" class="page-scroll btn btn-xl">Whaa!?</a> 
     </div> 
    </div> 
</header> 


<section id="men" class="bg-light-gray"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <h2 class="section-heading">Men Is Mortal.</h2> 
       <h3 class="section-subheading text-muted">Isn't he?</h3> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-4 col-sm-6 men-item"> 
       <a href="#menModal1" class="men-link" data-toggle="modal"> 
        <div class="men-hover"> 
         <div class="men-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="img/men/h1.png" class="img-responsive" alt=""> 
       </a> 
       <div class="men-caption"> 
        <h4>heading</h4> 
        <p class="text-muted">caption</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-6 men-item"> 
       <a href="#menModal2" class="men-link" data-toggle="modal"> 
        <div class="men-hover"> 
         <div class="men-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="img/men/h1.png" class="img-responsive" alt=""> 
       </a> 
       <div class="men-caption"> 
        <h4>heading</h4> 
        <p class="text-muted">Caption</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-6 men-item"> 
       <a href="#menModal3" class="men-link" data-toggle="modal"> 
        <div class="men-hover"> 
         <div class="men-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="img/men/h1.png" class="img-responsive" alt=""> 
       </a> 
       <div class="men-caption"> 
        <h4>Heading</h4> 
        <p class="text-muted">Caption</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-6 men-item"> 
       <a href="#menModal4" class="men-link" data-toggle="modal"> 
        <div class="men-hover"> 
         <div class="men-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="img/men/h1.png" class="img-responsive" alt=""> 
       </a> 
       <div class="men-caption"> 
        <h4>heaing</h4> 
        <p class="text-muted">Caption</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-6 men-item"> 
       <a href="#menModal5" class="men-link" data-toggle="modal"> 
        <div class="men-hover"> 
         <div class="men-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="img/men/h1.png" class="img-responsive" alt=""> 
       </a> 
       <div class="men-caption"> 
        <h4>sdfdg</h4> 
        <p class="text-muted">Caption</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-6 men-item"> 
       <a href="#menModal6" class="men-link" data-toggle="modal"> 
        <div class="men-hover"> 
         <div class="men-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="img/men/h1.png" class="img-responsive" alt=""> 
       </a> 
       <div class="men-caption"> 
        <h4>dggdg</h4> 
        <p class="text-muted">Caption</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</section>

來源

2015-06-26 10:28:52 abidkhanweb

如何在不改變效果的情況下在可滾動導航中添加下拉菜單？

回答

相關問題