[英]how to make a left aligned navigation with dropdown elements
I have been struggling to get my head around this for over a week now and I think my main problem is that I don't know where I should be looking.一个多星期以来,我一直在努力解决这个问题,我认为我的主要问题是我不知道应该去哪里寻找。
Basically what I want to create is a navigation area that is on the left side of the page.基本上我想要创建的是页面左侧的导航区域。 The person who I am building the website for has given me a TON of navigation elements (seriously there's about 25-30) that they would like.我为其构建网站的人给了我大量他们想要的导航元素(说真的大约有 25-30 个)。
I have managed to categorise them into proper headers and sub-headers but now I'm faced with the problem that I just don't know how to build in the dropdown functionality.我已经设法将它们分类为正确的标题和子标题,但现在我面临的问题是我不知道如何构建下拉功能。
I'm very new to web development and this is a great challenge to take on but I don't know where to start.我对 Web 开发非常陌生,这是一个巨大的挑战,但我不知道从哪里开始。
I have watched hours of tutorial vids talking about how to build navbars that are top aligned, that pop out on top of the content etc but none that "slide" open (if that makes sense) so that when you click on an element, the other links below it slide down to make room for the sub-headers.我已经观看了数小时的教程视频,讨论如何构建顶部对齐的导航栏,在内容顶部弹出,但没有“滑动”打开(如果有道理),以便当您单击一个元素时,它下方的其他链接向下滑动以为子标题腾出空间。
Here is what I have so far (it's a bit of a mess I know) have mercy!这是我到目前为止所拥有的(我知道这有点混乱)请怜悯!
http://www.fabio-felizzi.com/ http://www.fabio-felizzi.com/
It's just so I can show you what I mean by the styling of the navigation area.这只是为了向您展示我所说的导航区域样式的含义。
I've found myself wrapped up in a giant knot with this particular problem and could really use some help even if it's just a point in the right direction.我发现自己被这个特殊问题缠上了一个巨大的结,即使只是在正确方向上的一个点,也确实可以使用一些帮助。
I have tried to search for threads which have this particular problem but nothing has really hit the nail on the head so to speak, I apologise if I've missed something.我试图搜索有这个特殊问题的线程,但可以说没有任何东西真正击中钉子,如果我错过了什么,我深表歉意。
Many Thanks非常感谢
Here is the HTML that contains the navbar这是包含导航栏的 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>
and here is the Javascript这是 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"); }); });
I have yet to get to the CSS as frankly I've run into a brick wall with this and my brain has kind of short circuited.我还没有接触到 CSS,坦率地说,我遇到了这个问题,而且我的大脑有点短路。 I'm now at the stage where I'm so confused with all of this that I wouldn't even be able to explain my work.我现在正处于对这一切感到如此困惑的阶段,我什至无法解释我的工作。
If you want to use panel for drop down menu you may try what Peter Geerts said.如果您想使用面板作为下拉菜单,您可以尝试 Peter Geerts 所说的。 If you ar looking for old traditional fly out menu then this basic example may be helpful for you.如果您正在寻找旧的传统飞出菜单,那么这个基本示例可能对您有所帮助。
<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>
Helpful Bootstrap based resources from where you may learn more in details.有用的基于 Bootstrap 的资源,您可以从中了解更多详细信息。
Here are some adjustments to your code to factor in submenu's and a somewhat improved mobile setup.以下是对代码的一些调整,以考虑子菜单和稍微改进的移动设置。
It simply uses the Bootstrap Toogle that normal nav menus use.它只是使用普通导航菜单使用的 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 -->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.