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)
Recommend
Records of using ssh commands on Windows 8
1. Open the virtual machine and git bash window a...
Use a diagram to explain what Web2.0 is
Nowadays we often talk about Web2.0, so what is W...
Example of how to configure nginx to implement SSL
Environmental Description Server system: Ubuntu 1...
nginx solves the problem of slow image display and incomplete download
Written in front Recently, a reader told me that ...
A quick solution to accidentally delete MySQL data (MySQL Flashback Tool)
Overview Binlog2sql is an open source MySQL Binlo...
A quick solution to the problem of PC and mobile adaptation
When making a web page, we usually need to consid...
How to use js to determine whether a file is utf-8 encoded
Conventional solution Use FileReader to read the ...
MySQL 5.6 compressed package installation method
There are two installation methods for MySQL: msi...
How to use cutecom for serial communication in Ubuntu virtual machine
Using cutecom for serial communication in Ubuntu ...
Vue component organization structure and component registration details
Table of contents 1. Component Organization 2. Co...
Usage and best practice guide for watch in Vue3
Table of contents Preface🌟 1. API Introduction 2....
VMware installation of CentOS virtual machine and configuration network graphic tutorial
1. Download the CentOS image 1.1 Download website...
Solution to Linux server graphics card crash
When the resolution of the login interface is par...
Cause Analysis and Solution of I/O Error When Deleting MySQL Table
Problem phenomenon I recently used sysbench to te...
Operate on two columns of data as new columns in sql
As shown below: select a1,a2,a1+a2 a,a1*a2 b,a1*1...