简体   繁体   English

如何创建导航侧菜单?

[英]How to create a navigation side menu?

I just want to add a side menu that links to various pages on my site. 我只想添加一个侧面菜单,以链接到我网站上的各个页面。 I would like to use image buttons or simple hrefs that the user clicks on to navigate. 我想使用用户单击导航的图像按钮或简单的href。 I think I need to use a div somehow ? 我想我需要以某种方式使用div吗?

Thanks 谢谢

You can use a div element and float it left with CSS. 您可以使用div元素并将其与CSS浮动在一起。

HTML: HTML:

<div id="nav">
    <ul>
      <li><a href="http://example.com/page2">A Link</a></li>
      <li><a href="http://example.com/page3">Another Link</a></li>
    </ul>
</div>
<div id="content">
    <p> Here's some stuff </p>
</div>

CSS: CSS:

#nav {
    width: 20%;
    float: left;
    background-color: gray;
}

#content {
    width: 80%;
}

I would also run through the HTML and CSS tutorials at HTML Dog . 我还将在HTML Dog上阅读HTML和CSS教程。 It will make your life so much easier. 这将使您的生活变得更加轻松。

Listamatic包含有关如何设置链接列表样式的各种示例

HTML : HTML:

<!Doctype html>
<html projectReviver="leftmenu.html">
  <head>
    <title>My Left Menu</title>
    <link rel="StyleSheet" href="design.css" type="text/css" />
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav>
      <div id="main">
        <ul>
          <li><a href="page.html">First page</a></li>
          <li><a href="page2.html">2<sup>nd</sup>page</a></li>
       </ul>
      </div>
     </nav>
    </body>
  </html>

design.css : design.css:

#mainu ul {
  list-style: none;
  background-color: red;
}
#nav {
  width: 20%;
  float: left;
  background-color: red;
}
#content {
  list-style: none;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM