如何使用下拉元素進行左對齊導航

Question

一個多星期以來，我一直在努力解決這個問題，我認為我的主要問題是我不知道應該去哪里尋找。

基本上我想要創建的是頁面左側的導航區域。 我為其構建網站的人給了我大量他們想要的導航元素（說真的大約有 25-30 個）。

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

我對 Web 開發非常陌生，這是一個巨大的挑戰，但我不知道從哪里開始。

我已經觀看了數小時的教程視頻，討論如何構建頂部對齊的導航欄，在內容頂部彈出，但沒有“滑動”打開（如果有道理），以便當您單擊一個元素時，它下方的其他鏈接向下滑動以為子標題騰出空間。

這是我到目前為止所擁有的（我知道這有點混亂）請憐憫！

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

這只是為了向您展示我所說的導航區域樣式的含義。

我發現自己被這個特殊問題纏上了一個巨大的結，即使只是在正確方向上的一個點，也確實可以使用一些幫助。

我試圖搜索有這個特殊問題的線程，但可以說沒有任何東西真正擊中釘子，如果我錯過了什么，我深表歉意。

非常感謝

這是包含導航欄的 HTML

 <!-- Sidebar --> <nav id="sidebar-wrapper"> <a href="index"><img src="img/logo.png" alt="People's Centre for Change"></a> <ul class="sidebar-nav"> <li><a href="#" id="dropdown-toggle">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>

這是 Javascript

 //handle menu clicks and animate loading in of new content $('ul.sidebar-nav li a').click(function () { var toLoad = $(this).attr('href'); $('#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(); }); 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"); }); });

我還沒有接觸到 CSS，坦率地說，我遇到了這個問題，而且我的大腦有點短路。 我現在正處於對這一切感到如此困惑的階段，我什至無法解釋我的工作。

Answer 1

如果您想使用面板作為下拉菜單，您可以嘗試 Peter Geerts 所說的。 如果您正在尋找舊的傳統飛出菜單，那么這個基本示例可能對您有所幫助。

 <nav id="sidebar-wrapper"> <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"> <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>

有用的基於 Bootstrap 的資源，您可以從中了解更多詳細信息。

小提琴

簡單的側邊欄菜單

引導程序

Answer 2

以下是對代碼的一些調整，以考慮子菜單和稍微改進的移動設置。

它只是使用普通導航菜單使用的 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 -->