Implementation of CSS navigation bar menu (source code attached)

The content of this article is about the implementation of CSS navigation bar menu (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Many web pages have small triangles in their navigation bars. In fact, it is quite simple to implement this function.

Take the novice tutorial homepage navigation as an example

First write a large div_nav, and "Homepage", "Rookie Notes", "Rookie Tools", "Reference Manual", etc. are included in div_nav as divs middle. The background color of div_nav is set to the corresponding color.

The background color setting code is as follows:

.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{
color:#fff;
background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;
}

That is:

.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current

The annotation of the above code is:

id is the li of ul in the menu. That is, every element in the navigation bar. The effect will appear after the mouse is placed on it.
Added ul at the end to indicate that what pops up is a ul element
The entire css here specifies the style in this ul element.
To put it bluntly, it is the effect of the mouse sliding over the navigation bar

For example, we set the font color for the mouse-over state of a label element in HTML:

a:hover{color:red;}

a:hover represents Moving the mouse over

a:current should mean getting focus.

The small triangle is also easy to set up

.blue #slatenav
{position:relative;
display:block;
height:42px;
font-size:11px;
font-weight:bold;
background:transparent url(images/blueslate_background.gif)repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;
}

Use the background to set the background image of the small p such as "Home Page".

The effect of the mouse sliding over the label has been set above, so when the mouse slides over other labels, the background of the small triangle will also be displayed.

When the mouse slides over other labels:

## Okay, such a navigation with a small triangle is ready. As for other details, you can slowly adjust it by yourself.

Note: The document namespace is declared in the code.

Writing the tag alone does not declare the namespace of the document, but adding xmlns="http://www.w3.org/1999/xhtml" declares the namespace of the document. After declaring a namespace, the browser will follow this specification when parsing the tags of your HTML document. In general use, you won't feel much difference between the two.

The special situation lies in the interpretation of some tags. For example, the naming convention of xhtml requires that tags must be strictly closed. Single tags must be added with "/" at the end. If you use the naming convention of xhtml, and If the label is not written according to the specifications, the label may not be parsed. Therefore, good writing practice is to add closing tags.

Source code attached:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<meta>
<meta>
<meta>
<title>横版导航</title>
<link>

 

 
 
<p> </p>
 
<p>
</p><p>
</p>

• 首页
• 菜鸟笔记
• 菜鸟工具
• 参考手册
• 用户笔记
• 测验/考试
• 本地书签
• 登录
 

   

The above is the detailed content of Implementation of CSS navigation bar menu (source code attached). For more information, please follow other related articles on the PHP Chinese website!