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

Question

我一直在努力探索这个问题一个多星期了，我认为我的主要问题是我不知道应该在哪里看。

基本上我想要创建的是位于页面左侧的导航区域。我正在建立网站的人给了我一些他们想要的导航元素（严重的是大约25-30）。

我已设法将它们分类为正确的标题和子标题，但现在我遇到了一个问题，即我不知道如何构建下拉功能。

我对网络开发非常陌生，这是一个很大的挑战，但我不知道从哪里开始。

我已经观看了几个小时的教程视频，讨论如何构建顶部对齐的导航栏，这些导航栏在内容之上弹出，但没有一个＆＃34;滑动＆＃34;打开（如果这是有意义的），这样当你点击一个元素时，它下面的其他链接就会向下滑动，为子标题腾出空间。

到目前为止，这是我所知道的（我知道它有点混乱）怜悯！

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

我只能通过导航区的样式向您展示我的意思。

我发现自己被这个特殊问题包裹在一个巨大的结中，即使只是朝着正确的方向前进，也能真正得到一些帮助。

我试图寻找有这个特殊问题的线程，但是没有任何东西真正击中头部，可以这么说，如果我错过了什么，我道歉。

非常感谢

以下是包含导航栏的HTML

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是Javascript

＆＃13;

＆＃13;

  //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");
    });
});

＆＃13;

＆＃13;

＆＃13;

坦率地说，我还没有进入CSS，我已经碰到了这个砖墙，我的大脑有点短路。我现在正处于这样的困境，我甚至无法解释我的工作。

Answer 1

如果您想使用面板下拉菜单，您可以尝试Peter Geerts所说的内容。如果您正在寻找旧的传统飞出菜单，那么这个基本示例可能对您有所帮助。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有用的基于Bootstrap的资源，您可以从中详细了解更多信息。

Fiddle

Simple Sidebar Menu

bootsnipp

Answer 2

以下是对您的代码进行一些调整以考虑子菜单以及稍微改进的移动设置。

它只使用普通导航菜单使用的Bootstrap Toogle。

＆＃13;

＆＃13;

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;