CSS navigation bar menu with small triangle implementation code

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

Take the homepage navigation of the rookie tutorial as an example

First, write a large div_nav, and "Home", "Rookie Notes", "Rookie Tools", "Reference Manual", etc. are included in div_nav as divs. The div_nav background color 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;
}

Right now:

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

The annotations to the code in the figure above are:

The id is the li of ul in menu. That is, every element in the navigation bar. The effect will appear when you put the mouse on it.

The ul is added at the end to indicate that the pop-up is a ul element

The entire CSS here specifies the style of this ul element.

To put it simply, it is the effect of the mouse moving over the navigation bar

For example, we set the font color of a label element in HTML when the mouse is over it:

a:hover{color:red;}

a:hover means the mouse is over

a:current should mean getting the focus.

The small triangle is also easy to set

.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 background to set the background image of small divs such as "Homepage".

The above text sets the effect of the mouse hovering over the label, so when the mouse hovers over other labels, a small triangle background will also be displayed.

When the mouse moves over other tabs:

Okay, now a navigation with a small triangle is ready. As for other details, you can adjust them by yourself.

Note: The document namespace is declared in the code.

Writing the <html> tag alone does not declare the document's namespace, but adding xmlns=" http://www.w3.org/1999/xhtml " declares the document's namespace. After declaring the 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 case is the interpretation of some tags. For example, the xhtml naming convention requires that all tags must be strictly closed, and a "/" must be added at the end of a single tag. If you use the xhtml naming convention but do not follow the convention when writing tags, it is possible that the tag cannot be parsed. Therefore, a good writing habit is to add a closing tag.

Attach the source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<title>Horizontal navigation</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
 
<body style="text-align:center">
 
 
<p> </p>
 
<div class="blue">
<div id="slatenav">
<ul>
<li><a href="http://sc.chinaz.com/" title="css menus" class="current">Home</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">Newbie Notes</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">Rookie Tools</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">Reference Manual</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">User Notes</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">Test/Exam</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">Local Bookmarks</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">Login</a></li>
 
</ul>
</div>
</div>
 
 
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: XHTML Tutorial: The Difference Between Transitional and Strict

>>: MySQL string splitting operation (string interception containing separators)