我一直在努力讓我的頭腦在這一個多星期內現在我認爲我的主要問題是我不知道我應該在哪裏尋找。如何使用下拉元素製作左對齊導航
基本上我想創建的是位於頁面左側的導航區域。我正在構建網站的人給了我一大堆他們想要的導航元素(嚴重的是大約25-30)。
我已經設法將它們歸類爲正確的標題和子標題,但現在我面臨的問題是我只是不知道如何在下拉功能中構建。
我對web開發很陌生,這是一個很大的挑戰,但我不知道從哪裏開始。
我已經觀看了幾小時的教程視頻,討論如何構建頂部對齊的導航欄,彈出內容等頂部,但沒有「滑動」打開(如果這是有道理的),以便當您單擊一個元素,下面的其他鏈接滑下來爲子標題騰出空間。
這是我到目前爲止(這是一個混亂,我知道)有憐憫!
這只是這樣我就可以告訴你我的意思是導航區域的造型。
我發現自己被這個特殊問題包裹在一個巨大的結中,並且可以真正使用一些幫助,即使它只是一個正確的方向。
我試圖尋找具有這個特定問題的線程,但沒有什麼真正打到頭上可以這麼說,我很抱歉如果我錯過了什麼。
非常感謝
這裏是包含導航欄
\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");
});
});
我還沒有到達CSS,坦白地說,我碰到了一堵磚牆,而我的大腦有一種短路。我現在正處於我對這一切感到困惑的階段,甚至連我都無法解釋我的工作。
問題尋求幫助調試(「爲什麼不是這個代碼的工作?」)必須包括必要的重現它最短的代碼**在問題本身**。儘管您已經提供了一個示例鏈接,但如果鏈接無效,那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。 –
請參閱[**如何創建最小,完整和可驗證的示例**](http://stackoverflow.com/help/mcve) –
請添加您嘗試過/使用過的代碼。 – CodeRomeos