2015-09-15 51 views
-3

我一直在努力讓我的頭腦在這一個多星期內現在我認爲我的主要問題是我不知道我應該在哪裏尋找。如何使用下拉元素製作左對齊導航

基本上我想創建的是位於頁面左側的導航區域。我正在構建網站的人給了我一大堆他們想要的導航元素(嚴重的是大約25-30)。

我已經設法將它們歸類爲正確的標題和子標題,但現在我面臨的問題是我只是不知道如何在下拉功能中構建。

我對web開發很陌生,這是一個很大的挑戰,但我不知道從哪裏開始。

我已經觀看了幾小時的教程視頻,討論如何構建頂部對齊的導航欄,彈出內容等頂部,但沒有「滑動」打開(如果這是有道理的),以便當您單擊一個元素,下面的其他鏈接滑下來爲子標題騰出空間。

這是我到目前爲止(這是一個混亂,我知道)有憐憫!

http://www.fabio-felizzi.com/

這只是這樣我就可以告訴你我的意思是導航區域的造型。

我發現自己被這個特殊問題包裹在一個巨大的結中,並且可以真正使用一些幫助,即使它只是一個正確的方向。

我試圖尋找具有這個特定問題的線程,但沒有什麼真正打到頭上可以這麼說,我很抱歉如果我錯過了什麼。

非常感謝

這裏是包含導航欄

\t <!-- Sidebar --> 
 
\t \t \t <nav id="sidebar-wrapper"> 
 
\t \t \t \t <a href="index"><img src="img/logo.png" alt="People's Centre for Change"></a> 
 
\t \t \t \t <ul class="sidebar-nav"> 
 
\t \t \t \t \t <li><a href="#" id="dropdown-toggle">About Us</a> 
 
\t \t \t \t \t \t <ul class="dropdown-wrapper"> 
 
\t \t \t \t \t \t \t <li><a href="about-us">About Us</a></li> 
 
\t \t \t \t \t \t \t <li><a href="our-journey">Our Journey</a></li> 
 
\t \t \t \t \t \t \t <li><a href="where-we-are-going">Where We Are Going</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li><a href="what-we-do">What We Do</a></li> 
 
\t \t \t \t \t <li><a href="the-building">The Building</a></li> 
 
\t \t \t \t \t <li><a href="volunteer">Volunteer With Us</a></li> 
 
\t \t \t \t \t <li><a href="get-involved">Get Involved</a></li> 
 
\t \t \t \t \t <li><a href="products">Unique Products</a></li> 
 
\t \t \t \t \t <li><a href="donate">Donate</a></li> 
 
\t \t \t \t \t <li><a href="contact">Contact Us</a></li> 
 
\t \t \t \t \t <li><a href="calendar">Calendar</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </nav>

這裏是JavaScript

//handle menu clicks and animate loading in of new content 
 
    $('ul.sidebar-nav li a').click(function() { 
 
     var toLoad = $(this).attr('href'); 
 
    \t $('#ajax-content-wrapper').load('html/' + toLoad + '.php', function(){ 
 
     $('#ajax-content-wrapper').hide('slow',loadContent); 
 
     function loadContent() { 
 
      $('#ajax-content-wrapper').load(toLoad,'',showNewContent()); 
 
      } 
 
     function showNewContent() { 
 
      $('#ajax-content-wrapper').show('slow'); 
 
      } 
 
     $('.bxslider').bxSlider(); 
 
     }); 
 
    \t return false; 
 
    }); 
 

 
    //hide/display sidebar nav 
 
    $("#menu-toggle").click(function (e){ 
 
     e.preventDefault(); 
 
     $("#wrapper").toggleClass("menuDisplayed"); 
 
    }); 
 

 
    //hide/display dropdown nav 
 
    $("#dropdown-toggle").click(function (e){ 
 
     e.preventDefault(); 
 
     e.stopPropagation(); 
 
     $(".dropdown-wrapper").toggleClass("dropdownDisplayed"); 
 
    }); 
 
});
的HTML 210

我還沒有到達CSS,坦白地說,我碰到了一堵磚牆,而我的大腦有一種短路。我現在正處於我對這一切感到困惑的階段,甚至連我都無法解釋我的工作。

+0

問題尋求幫助調試(「爲什麼不是這個代碼的工作?」)必須包括必要的重現它最短的代碼**在問題本身**。儘管您已經提供了一個示例鏈接,但如果鏈接無效,那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。 –

+0

請參閱[**如何創建最小,完整和可驗證的示例**](http://stackoverflow.com/help/mcve) –

+0

請添加您嘗試過/使用過的代碼。 – CodeRomeos

回答

0

這裏有一些調整你的代碼在子菜單中的和有所改善的移動設置成因子。

它只是使用常規導航菜單使用的Bootstrap Toogle。

$("#menu-toggle").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#wrapper").toggleClass("toggled"); 
 
});
body, 
 
html { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 
#wrapper.toggled { 
 
    padding-left: 250px; 
 
} 
 
.btn-default#menu-toggle, 
 
.btn-default#menu-toggle:hover, 
 
.btn-default#menu-toggle:focus { 
 
    border: none; 
 
    outline: none; 
 
    box-shadow: none; 
 
    background: none; 
 
    color: #419ca6; 
 
} 
 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    left: 250px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -250px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    background: #419ca6; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 250px; 
 
} 
 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 15px; 
 
} 
 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -250px; 
 
} 
 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 250px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #ddd; 
 
} 
 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #444; 
 
    background: rgba(255, 255, 255, 0.2); 
 
} 
 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 
.sidebar-nav .sidebar-brand { 
 
    text-align: center; 
 
} 
 
.sidebar-nav ul { 
 
    list-style: none; 
 
    list-style-position: outside; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.sidebar-nav ul > li { 
 
    font-size: 13px; 
 
} 
 
.sidebar-nav ul > li > a { 
 
    color: #ddd; 
 
    text-decoration: none; 
 
    padding-left: 10px; 
 
} 
 
.sidebar-nav ul > li > a:hover { 
 
    color: #fff; 
 
    background: rgba(255, 255, 255, 0.6); 
 
} 
 
@media(min-width:768px) { 
 
    #wrapper { 
 
    padding-left: 250px; 
 
    } 
 
    #wrapper.toggled { 
 
    padding-left: 0; 
 
    } 
 
    #sidebar-wrapper { 
 
    width: 250px; 
 
    } 
 
    #wrapper.toggled #sidebar-wrapper { 
 
    width: 0; 
 
    } 
 
    #page-content-wrapper { 
 
    padding: 20px; 
 
    position: relative; 
 
    } 
 
    #wrapper.toggled #page-content-wrapper { 
 
    position: relative; 
 
    margin-right: 0; 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="wrapper"> 
 
    <!-- Sidebar --> 
 
    <div id="sidebar-wrapper"> 
 
    <ul class="sidebar-nav"> 
 
     <li class="sidebar-brand"> 
 
     <img src="http://www.fabio-felizzi.com/img/logo.png" alt="People's Centre for Change"> 
 
     </li> 
 
     <li> <a href="#">Home</a> 
 

 
     </li> 
 
     <li> <a href="#nope" data-toggle="collapse" data-target="#drop1"> About Us<span class="caret"></span></a> 
 

 
     <ul id="drop1" class="collapse" data-parent="#sideNavParent"> 
 
      <li><a href="about-us">About Us</a> 
 

 
      </li> 
 
      <li><a href="our-journey">Our Journey</a> 
 

 
      </li> 
 
      <li><a href="where-we-are-going">Where We Are Going</a> 
 

 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="what-we-do">What We Do</a> 
 

 
     </li> 
 
     <li><a href="the-building">The Building</a> 
 

 
     </li> 
 
     <li><a href="volunteer">Volunteer With Us</a> 
 

 
     </li> 
 
     <li><a href="get-involved">Get Involved</a> 
 

 
     </li> 
 
     <li><a href="products">Unique Products</a> 
 

 
     </li> 
 
     <li><a href="donate">Donate</a> 
 

 
     </li> 
 
     <li><a href="contact">Contact Us</a> 
 

 
     </li> 
 
     <li><a href="calendar">Calendar</a> 
 

 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- /#sidebar-wrapper --> 
 
    <!-- Page Content --> 
 
    <div id="page-content-wrapper"> <a href="#" class="btn btn-default" id="menu-toggle"><span class="glyphicon glyphicon-th-list"></span></a> 
 

 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-lg-12"> 
 
      <h1>People's Centre for Change</h1> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- /#page-content-wrapper --> 
 
</div> 
 
<!-- /#wrapper -->

+0

非常感謝您的幫助。我當然很感激它。正如我在我的原始文章中提到的,我對網絡開發非常陌生,顯然有很多東西要學習(包括如何研究文檔!​​!) – pragmatic84

+0

沒問題,歡迎您! – vanburen

0

如果你想使用面板下拉菜單,你可以嘗試一下Peter Geerts說的話。如果你正在尋找舊的傳統飛菜單,那麼這個基本的例子可能會對你有所幫助。

<nav id="sidebar-wrapper"> \t <a href="index"><img src="img/logo.png" alt="People's Centre for Change"></a> 
 

 
    <ul class="sidebar-nav"> 
 
     <li id="dropdown-toggle"> 
 
     <a href="#">About Us</a> 
 
      <ul class="dropdown-wrapper"> 
 
       <li><a href="about-us">About Us</a> 
 
       </li> 
 
       <li><a href="our-journey">Our Journey</a> 
 
       </li> 
 
       <li><a href="where-we-are-going">Where We Are Going</a> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="what-we-do">What We Do</a> 
 
     </li> 
 
     <li><a href="the-building">The Building</a> 
 
     </li> 
 
     <li><a href="volunteer">Volunteer With Us</a> 
 
     </li> 
 
     <li><a href="get-involved">Get Involved</a> 
 
     </li> 
 
     <li><a href="products">Unique Products</a> 
 
     </li> 
 
     <li><a href="donate">Donate</a> 
 
     </li> 
 
     <li><a href="contact">Contact Us</a> 
 
     </li> 
 
     <li><a href="calendar">Calendar</a> 
 
     </li> 
 
    </ul> 
 
</nav>
#sidebar-wrapper { 
 
    background:teal; 
 
    width:200px; 
 
} 
 
#sidebar-wrapper a { 
 
    color:#fff; 
 
    text-decoration:none 
 
} 
 
#dropdown-toggle ul { 
 
    background:red; 
 
    width:200px; /*Adjust as per requirement*/ 
 
    position:absolute; 
 
    left:150px; /*Adjust as per requirement*/ 
 
    top:50px; /*Adjust as per requirement*/ 
 
    display:none 
 
} 
 
#dropdown-toggle:hover ul { 
 
    display:block 
 
}
<nav id="sidebar-wrapper"> 
 
\t \t \t \t <a href="index"><img src="img/logo.png" alt="People's Centre for Change"></a> 
 
\t \t \t \t <ul class="sidebar-nav"> 
 
\t \t \t \t \t <li id="dropdown-toggle"><a href="#">About Us</a> 
 
\t \t \t \t \t \t <ul class="dropdown-wrapper"> 
 
\t \t \t \t \t \t \t <li><a href="about-us">About Us</a></li> 
 
\t \t \t \t \t \t \t <li><a href="our-journey">Our Journey</a></li> 
 
\t \t \t \t \t \t \t <li><a href="where-we-are-going">Where We Are Going</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li><a href="what-we-do">What We Do</a></li> 
 
\t \t \t \t \t <li><a href="the-building">The Building</a></li> 
 
\t \t \t \t \t <li><a href="volunteer">Volunteer With Us</a></li> 
 
\t \t \t \t \t <li><a href="get-involved">Get Involved</a></li> 
 
\t \t \t \t \t <li><a href="products">Unique Products</a></li> 
 
\t \t \t \t \t <li><a href="donate">Donate</a></li> 
 
\t \t \t \t \t <li><a href="contact">Contact Us</a></li> 
 
\t \t \t \t \t <li><a href="calendar">Calendar</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </nav>

幫助引導基於從那裏你可以瞭解更多詳細的資源。

Fiddle

Simple Sidebar Menu

bootsnipp