Two simple menu navigation bar examples

Two simple menu navigation bar examples

Menu bar example 1:


Copy code
The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script">http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script</a> type="text/javascript">
$(function() {
$("#container .menu1 ul li").click(function() {
var index = $("#container .menu1 ul li").index(this);
$(this).addClass("bg").siblings().removeClass();
$("#container .menu2 ul li ul").eq(index).show().parent().siblings("li").children("ul").hide();
})
})
</script><style type="text/css">
body
{
margin: 0;
padding: 0;
font-family: "宋体";
font-size: 9pt;
color: #FFFFFF;
font-weight: bold;
}
#container
{
width: 100%; /* 1200px; */
height: auto;
margin: 0 auto;
/* border: 1px #1025c0 solid; */
/* xugang 2011.10.19 */
/* margin: 0; */
padding: 0px;
font-family: "宋体";
font-size: 9pt;
color: #FFFFFF;
font-weight: bold;
}
#container .menu1
{
width: 684px;
height: 34px;
border: none;
background: url(/images/cnblogs_com/xugang/sadasd_09.png) no-repeat;
/*background: url(<a href="http://www.webdm.cn/images/20101213/2/menu1.gif">http://www.webdm.cn/images/20101213/2/menu1.gif</a>) no-repeat;
background-color: #1B5582;*/
}
#container .menu1 ul
{
margin: 0;
/* padding: 0; */
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 4px;
position: relative;
margin-left: 4px; /* xugang first-level menu selection item style*/
}
#container .menu1 ul li
{ /*border: 1px #1025c0 solid; test*/
float: left;
height: 25px;
width: 110px;
line-height: 25px;
list-style: none;
text-align: center;
cursor: pointer;
/* color: #fffff; */
padding-left: 2px; /* xugang first level menu selection item*/
/* margin-left: 1px; xugang The first-level menu selection item can easily make the first-level menu dynamically move to the right*/
}
#container .menu2
{
width: 100%; /* 1000px; */
height: 25px;
border: none;
color: #000000;
font-weight: normal;
background-color: #C9DEFA; /* #DFF0FF submenu color*/
padding-left: 0px; /* xugang */
padding-top: 0px; /* xugang */
margin-left: 0px; /* xugang */
}
#container .menu2 ul
{
margin: 0; /* xugang original margin: 0; */
padding: 0;
}
#container .menu2 ul li
{
height: 30px;
line-height: 30px;
list-style: none;
float: left;
cursor: pointer;
}
#container .menu2 ul li ul li
{ /* border: 1px #1025c0 solid; test*/
float: left;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 40px;
padding-right: 30px; /* xugang */
height: 25px;
line-height: 25px;
list-style: none;
}
.bg
{
font-size: 12pt;
/* font-weight: normal;*/
/* text-decoration: underline; blink */
background-color: #1B5582; /* #1B5582 first-level menu selection background*/
}
.hide
{
display: none;
}
.menu_a1{ display: block; color:#ffffff; text-decoration:none !important; }
.menu_a2{ display: block; color:#000000; text-decoration:none !important; }
</style>
</head>
<body>
<div id="container">
<div class="menu1">
<ul>
<li class="bg"><a href="#" class="menu_a1">First column</a></li>
<li><a href="#" class="menu_a1">Second column</a></li>
<li><a href="#" class="menu_a1">Third Column</a></li>
<li><a href="#" class="menu_a1">Fourth column</a></li>
<li><a href="#" class="menu_a1">Fifth column</a></li>
<li><a href="#" class="menu_a1">Sixth Column</a></li>
</ul>
</div>
<div class="menu2">
<ul>
<li>
<ul>
<li><a href="#" class="menu_a2">First column</a></li>
<li><a href="#" class="menu_a2">First column</a></li>
<li><a href="#" class="menu_a2">First column</a></li>
</ul>
</li>
<li>
<ul class="hide">
<li>Second column</li><li>Second column</li><li>Second column</li>
</ul>
</li>
<li>
<ul class="hide">
<li>Third column</li><li>Third column</li><li>Third column</li>
</ul>
</li>
<li>
<ul class="hide">
<li>Fourth column</li><li>Fourth column</li><li>Fourth column</li>
</ul>
</li>
<li>
<ul class="hide">
<li>Fifth column</li><li>Fifth column</li><li>Fifth column</li>
</ul>
</li>
<li>
<ul class="hide">
<li>Sixth column</li><li>Sixth column</li><li>Sixth column</li>
</ul>
</li>
</ul>
</div>
</div>
<div style="width:400px; height:300px; background-color:red;"></div>

</body>
</html>


Menu bar example 2:




Copy code
The code is as follows:

<html>
<head>
<title>Yellow Pages Region List</title>
<style type="text/css">
body {background:#ccc;color:#000;font: normal normal normal 12px/180% Tahoma, Arial, Helvetica, sans-serif, "宋体";text-align:center;}
.nav {position: relative;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 0 -36px;width:960px;height:36px;}
.navinner {background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 100% -72px;}
.navlist {height: 36px;line-height: 36px;overflow: hidden;margin: 0 10px;background: url(/images/cnblogs_com/xugang/nav_bg.png) repeat-x 0 0;}
.nav li {float: left;display: inline;margin: 0 0 0 -2px;padding: 0 4px 0 6px;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 0 -108px;}
.nav a {display: block;width: 102px;text-align: center;font-size: 120%; text-decoration:none;}
.nav a:link, .nav a:visited {color: #fff;text-decoration:none;}
.nav a:hover, .nav a:active {color: #fff;font-weight: bold;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 50% -144px;text-decoration:none;}
</style>
</head>
<body>
<div class="nav">
<div class="navinner">
<ul class="navlist">
<li><a href="https://www.jb51.net/">https://www.jb51.net/</a>" title="Home">Home</a></li>
<li><a href="<a href="https://www.jb51.net/cat.html">https://www.jb51.net/cat.html</a>" title="Category List" rel="nofollow">Category List</a></li>
<li><a href="<a href="https://www.jb51.net/loc.html">https://www.jb51.net/loc.html</a>" title="Region List" rel="nofollow">Region List</a></li>
<li><a href="<a href="https://www.jb51.net/trade.html">https://www.jb51.net/trade.html</a>" title="Supply and Demand Opportunities" rel="nofollow">Supply and Demand Opportunities</a></li>
<li><a href="<a href="https://www.jb51.net/news.html">https://www.jb51.net/news.html</a>" title="Industry News" rel="nofollow">Industry News</a></li>
<li><a href="<a href="https://www.jb51.net/submit.html">https://www.jb51.net/submit.html</a>" title="Submit Enterprise" rel="nofollow">Submit Enterprise</a></li>
<li><a href="<a href="https://www.jb51.net/join.html">https://www.jb51.net/join.html</a>" title="Publish business opportunities" rel="nofollow">Publish business opportunities</a></li>
<li><a href="<a href="https://www.jb51.net/find.html">https://www.jb51.net/find.html</a>" title="Advanced Search" rel="nofollow">Advanced Search</a></li>
</ul>
</div>
</div>
</body>
</html>

<<:  Solve the error problem of warnings potentially fixable with the `--fix` option when running a Vue project

>>:  Analysis of product status in interactive design that cannot be ignored in design

Recommend

Detailed explanation of MySQL limit usage and performance analysis of paging query statements

Limit usage When we use query statements, we ofte...

Detailed explanation of nginx configuration file interpretation

The nginx configuration file is mainly divided in...

Detailed explanation of mkdir command in Linux learning

Table of contents Preface 1. Basic knowledge of f...

Tutorial on installing mongodb under linux

MongoDB is cross-platform and can be installed on...

How to use gdb to debug core files in Linux

1.core file When a Segmentation fault (core dumpe...

Solution to nginx-ingress-controller log persistence solution

Recently I saw an article on a public account tha...

Using Zabbix to monitor the operation process of Oracle table space

0. Overview Zabbix is ​​an extremely powerful ope...

Vue implements custom "modal pop-up window" component example code

Table of contents Preface Rendering Example Code ...

Introduction and use of js observer mode

Table of contents I. Definition 2. Usage scenario...

Add and delete table information using javascript

Getting Started with JavaScript JavaScript is a l...

How to convert JavaScript array into tree structure

1. Demand The backend provides such data for the ...

Detailed explanation of the example of exporting data from a specified table in MySQL

Detailed explanation of MySQL exporting data from...

MySQL 5.7.21 Installer Installation Graphic Tutorial under Windows 10

Install MySQL and keep a note. I don’t know if it...

Sharing tips on using vue element and nuxt

1. Element time selection submission format conve...

Vue.js handles Icon icons through components

Icon icon processing solution The goal of this re...