Implementation of CSS navigation bar menu (source code attached)-CSS Tutorial-php.cn

Implementation of CSS navigation bar menu (source code attached)

不言

Release： 2018-11-16 16:03:04

forward

3788 people have browsed it

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;
}

Copy after login

That is:

Implementation of CSS navigation bar menu (source code attached)

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

Copy after login

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;}

Copy after login

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;
}

Copy after login

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.

Implementation of CSS navigation bar menu (source code attached)

When the mouse slides over other labels:

Implementation of CSS navigation bar menu (source code attached)

## 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>

Copy after login

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

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!