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
React hooks introductory tutorial
State Hooks Examples: import { useState } from &#...
A detailed introduction to setting up Jenkins on Tencent Cloud Server
Table of contents 1. Connect to Tencent Cloud Ser...
Introduction to the use of http-equiv attribute in meta tag
meta is an auxiliary tag in the head area of htm...
How to view image information in Docker
In this article, we will need to learn how to vie...
centos7.2 offline installation mysql5.7.18.tar.gz
Because of network isolation, MySQL cannot be ins...
Detailed explanation of JavaScript animation function encapsulation
Table of contents 1. Principle of animation funct...
Detailed tutorial for installing influxdb in docker (performance test)
1. Prerequisites 1. The project has been deployed...
Summary of MySQL5 green version installation under Windows (recommended)
1 Download MySQL Download address: http://downloa...
Running PostgreSQL in Docker and recommending several connection tools
1 Introduction PostgreSQL is a free software obje...
Detailed analysis of the blocking problem of js and css
Table of contents DOMContentLoaded and load What ...
Two ways to clear table data in MySQL and their differences
There are two ways to delete data in MySQL: Trunc...
How to solve the error when connecting to MySQL in Linux: Access denied for user 'root'@'localhost'(using password: YES)
Preface Recently connected to mysql /usr/local/my...
About scroll bar in HTML/removing scroll bar
1. The color of the scroll bar under xhtml In the ...
Solution to "No such file or directory" in locale after installing glibc-2.14 in CentOS6.5
Table of contents 1. Falling into the pit 2. Stru...
Implementation process of row_number in MySQL
1. Background Generally, in a data warehouse envi...