[英]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.