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

What is BFC? How to clear floats using CSS pseudo elements

BFC Concept: The block formatting context is an i...

Tips on making web pages for mobile phones

Considering that many people now use smartphones, ...

Detailed explanation of commands to read and write remote files using Vim in Linux system

Set vim's working mode (temporary) :set (mode...

Solution to the routing highlighting problem of Vue components

Preface Before, I used cache to highlight the rou...

Linux system to view CPU, machine model, memory and other information

During system maintenance, you may need to check ...

Tutorial on installing GreasyFork js script on mobile phone

Table of contents Preface 1. Iceraven Browser (Fi...

Complete steps to build NFS file sharing storage service in CentOS 7

Preface NFS (Network File System) means network f...

Summary of common functions and usage methods of WeChat applet development

Here, I have mainly sorted out some commonly used...

Detailed explanation of Angular component projection

Table of contents Overview 1. Simple Example 1. U...

Maven project remote deployment && How to configure database connection using tomcat

one. Remote deployment using tomcat 1.1 Problems ...

MySQL password modification example detailed explanation

MySQL password modification example detailed expl...

Summary of various methods for Vue to achieve dynamic styles

Table of contents 1. Ternary operator judgment 2....

jQuery implements a simple carousel effect

Hello everyone, today I will share with you the i...

Detailed explanation of JavaScript implementation of hash table

Table of contents 1. Hash table principle 2. The ...

MySQL community server 8.0.16 installation and configuration method graphic tutorial under Windows

I have seen a lot of MySQL-related syntax recentl...