如何使用下拉元素进行左对齐导航

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 -->