Posts in current category

Detailed css navigation bar to implement code and footage download


May 04, 2021 02:00 CSS


Table of contents


Navigation bar is the foundation of a website, beautiful and easy to use navigation bar is very important for any website. T raditionally, navigation bars are made up of graphical images placed in a row of table cells. B ecause tables are no longer recommended to locate any non-table page content, many people use structured XHTML tags and CSS formats to create navigation bars. Here's a look at how the simplest CSS navigation bar is implemented:


Detailed css navigation bar to implement code and footage download

First, let's write an HTML code for this drop - down menu. C reate a div as a container and put the navigation menu in this container. A s the following code, we use a sequenceless table to create this navigation menu. I n this navigation menu, there is a sub-menu under Portfolio, expressed in bold, and don't forget to turn off .

<div id="nav">

<ul>

<li class="first"><a href="#">Home</a></li>

<li><a href="#">About Me</a></li>

<li><a href="#">Portfolio</a>

<ul>

<li><a href="#">Web</a></li>

<li><a href="#">Print</a></li>

<li><a href="#">Photos</a></li>

</ul>

</li>

<li><a href="#">Contact Me</a></li>

</ul>

</div>

The CSS


First of all, let's set a style for the s nav div and give it a width, height, font size. and remove the default sequenceless table style.

*{ margin:0px; padding: 0px; }

#nav {

font-family: arial, sans-serif;

position: relative;

width: 390px;

height:56px;

font-size:14px;

color:#999;

margin: 0 auto;

}

#nav ul {

list-style-type: none;

}

In this step we set the left float to let the entire navigation level. And set the relative, remember to become a ancestral element, so that we can take advantage of the absolute positioning below.

#nav ul li {

float: left

position: relative;

}

In this step we set a style for the label to look like a press twist (div css tutorial - how to use css to create a similar twist navigation)

#nav ul li a {

text-align: center;

border-right:1px solid #e9e9e9;

padding:20px;

display:block;

text-decoration:none;

color:#999;

}

The most important part
This section will show you how to make the drop-down menu appear and hide. When the cursor does not move to the Portfolio drop-down menu does not appear, when the cursor moves to top of Portfolio, the drop-down menu displays, we use the display properties to achieve this effect.

#nav ul li ul {

display: none

}

#nav ul li:hover ul {

display: block;

position: absolute;

}

We style the hover state of the drop-down menu

#nav ul li:hover ul li a {

display:block;

background:#12aeef;

color:#ffffff;

width: 110px;

text-align: center;

border-bottom: 1px solid #f2f2f2;

border-right: none;

}

#nav ul li:hover ul li a:hover {

background:#6dc7ec;

color:#fff;

}

Full CSS

#nav ul li:hover ul {

display: block;

position: absolute; }

#nav ul li:hover ul li a {

display:block;

background:#12aeef;

color:#ffffff;

width: 110px;

text-align: center;

border-bottom: 1px solid #f2f2f2;

border-right: none; }

#nav ul li:hover ul li a:hover {

background:#6dc7ec;

color:#fff; }


Try it out . . .

See how it works online

css navigation bar footage download


4-color landscape CSS navigation bar menu
Detailed css navigation bar to implement code and footage download
Download here


Color navigation menu implemented by pure CSS

Detailed css navigation bar to implement code and footage download
Download here


The left navigation layout CSS page template

Detailed css navigation bar to implement code and footage download

Download here

CSS bilingual navigation menu in Both English and Chinese

Detailed css navigation bar to implement code and footage download

Download here


CSS horizontal drop-down menu

Detailed css navigation bar to implement code and footage download

Download here


Div css drop-down navigation menu classification code

Detailed css navigation bar to implement code and footage download

Download here


Five beautiful CSS horizontal drop-down menu navigation bars

Detailed css navigation bar to implement code and footage download

Detailed css navigation bar to implement code and footage download

Detailed css navigation bar to implement code and footage download

Detailed css navigation bar to implement code and footage download

Detailed css navigation bar to implement code and footage download

Download here