Create css horizontal navigation menu using ul and li tags-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Create css horizontal navigation menu using ul and li tags

高洛峰

Nov 24, 2016 am 11:45 AM

css

Perhaps the simplest solution to create a CSS-style text navigation bar is to put all links in a line of text. This method seems reasonable and intuitive. But the problem is that putting all links in one line of text makes it difficult to control the white space between links and before and after them. So, in order to avoid all the links being crowded together, you usually end up having to insert something or a non-newline whitespace character as a separator to keep the text separated and not mixed together.

Our normal approach now is to use ul and li tags to identify links as an unordered list. Then apply CSS styles to control it and display it in the container as we expected. Using an unordered list for a navigation bar seems counterintuitive, because we are used to thinking of an unordered list as a list item pushed up vertically, with a list preset mark placed in front of each one. This seems inconsistent with the horizontal orientation of the navigation bar. But the logical structure of a list as a collection of independent list items can be applied to links in the navigation bar; and CSS rules allow you to force the default presentation of list items to eliminate them and arrange the list items to be arranged horizontally within the container. , rather than top-down rules. Now let's take a look at an example to create a horizontal navigation menu with CSS styles and XHTML tags based on an unordered list.

CSS code

 <div id="nav">   
  <ul>   
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">   </ul>   
</div>

Let’s take a look at this CSS code again:

CSS code

#nav {   
    height: 30px;   
    width: 100%;   
    background-color: #c00;   
}   
#nav ul {   
    margin: 0 0 0 30px;   
    padding: 0px;   
    font-size: 12px;   
    color: #FFF;   
    line-height: 30px;   
    whitewhite-space: nowrap;   
}   
#nav li {   
    list-style-type: none;   
    display: inline;   
}   
#nav li a {   
    text-decoration: none;   
    font-family: Arial, Helvetica, sans-serif;   
    padding: 7px 10px;   
    color: #FFF;   
}   
#nav li a:hover {   
    color: #ff0;   
    background-color: #f00;   
}

Let’s take a look at the complete HTML of the above code, copy it and put it into an HTML page, everyone You can see the effect:

XML/HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>www.52css.com</title>  
<style type="text/css">  
<!--    
#nav {   
    height: 30px;   
    width: 100%;   
    background-color: #c00;   
}   
#nav ul {   
    margin: 0 0 0 30px;   
    padding: 0px;   
    font-size: 12px;   
    color: #FFF;   
    line-height: 30px;   
    white-space: nowrap;   
}   
#nav li {   
    list-style-type: none;   
    display: inline;   
}   
#nav li a {   
    text-decoration: none;   
    font-family: Arial, Helvetica, sans-serif;   
    padding: 7px 10px;   
    color: #FFF;   
}   
#nav li a:hover {   
    color: #ff0;   
    background-color: #f00;   
}   
-->  
</style>  
</head>  
<body>  
<div id="nav">  
  <ul>  
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">CSS教程</a></li>  
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">   </ul>  
</div>  
</body>  
</html>

Let’s analyze the above code:

The xhtml code first defines a container div id="nav". This container is used to place the content of this unordered list horizontal navigation menu, but some people think that this container is redundant and just define ul id="nav". We do not recommend that you do this. You must know that our site is scalable and we need to leave enough room for future expansion. If our navigation style is designed to be more complex, only UL will not meet our needs. Our definition of such a container is also more in line with our coding habits.

　 #nav defines the width, height and background color of the window. #nav ul contains margin and padding declarations, font and color declarations. line-height: 30px; is a very important definition. If the definition of line height is cancelled, the vertical centering of our link text may be affected. white-space: nowrap; Maybe you don't understand what it does. It defines that all text is forced to be displayed in the same line until the text ends or the br object is encountered.

　List-style-type: none in #nav li removes the default tag used by list items. Make it more like plain text without list markup. The display: inline; statement allows the list items to float from left to right on the page, rather than having each item displayed in a separate line and arranged from top to bottom. These two statements are the key to our implementation of the unordered list horizontal navigation menu.
　#nav li a and #nav li a:hover define the style of the link. I won’t go into details about the content. The only thing I want to talk about is: padding: 7px 10px; it is used to control the blank space between link text. You can try changing the value and try it out.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

CSS Inclusion: Choosing the Right Method for Your ProjectMay 16, 2025 am 12:02 AM

ThebestmethodforincludingCSSdependsonprojectsizeandcomplexity:1)Forlargerprojects,useexternalCSSforbettermaintainabilityandperformance.2)Forsmallerprojects,internalCSSissuitabletoavoidextraHTTPrequests.Alwaysconsidermaintainabilityandperformancewhenc

This Isn't Supposed to Happen: Troubleshooting the ImpossibleMay 15, 2025 am 10:32 AM

What it looks like to troubleshoot one of those impossible issues that turns out to be something totally else you never thought of.

@keyframes vs CSS Transitions: What is the difference?May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

Using Pages CMS for Static Site Content ManagementMay 13, 2025 am 09:24 AM

I know, I know: there are a ton of content management system options available, and while I've tested several, none have really been the one, y'know? Weird pricing models, difficult customization, some even end up becoming a whole &

The Ultimate Guide to Linking CSS Files in HTMLMay 13, 2025 am 12:02 AM

Linking CSS files to HTML can be achieved by using elements in part of HTML. 1) Use tags to link local CSS files. 2) Multiple CSS files can be implemented by adding multiple tags. 3) External CSS files use absolute URL links, such as. 4) Ensure the correct use of file paths and CSS file loading order, and optimize performance can use CSS preprocessor to merge files.

CSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AM

Choosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.

How to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AM

The best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.

Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

See all articles