Navigation menu bar is one of the must attractive elements in any blogs and websites. While creating a website, navigation bar plays vital role to make it effective and attractive. Navigation menu is actually a list of links, which helps to navigate different pages of website easily. Basically a navigation menu looks like as below. It is an example of creating simple horizontal navigation menu bar using HTML and CSS.
Horizontal Navigation Menu
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| #menu ul{
padding: 1px;
text-align: left;
list-style-type: none;
}
#menu li{
display: inline;
}
#menu li a{
background-color: black;
font-size: 16px;
padding: 10px 18px;
border: 1px inset #ffffff;
text-decoration: none;
border-radius: 10px 10px 0 0;
color: white;
}
#menu a:hover{
background-color: blue;
color: yellow;
font-weight: bold;
border-radius: 10px 10px 0 0;
}
|
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!DOCTYPE html>
<html>
</head>
<body>
<div id="menu">
<ul>
<li> <a href="https://www.rkl.com.np"> Home </a>
<li> <a href="#"> Business </a>
<li> <a href="#"> News </a> </li>
<li> <a href="#"> Sports </a> </li>
<li> <a href="#">About US </a> </li>
</ul>
</div>
</body>
<html>
|
We can also create a vertical navigation menu bar as below. It is quite easy, you just need to modify a single line of code of previous CSS. Check out the following code you will get what was difference.
Vertical Navigation Menu
- Home
- Business
- News
- Sports
- About US
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| #menu ul{
padding: 1px;
text-align: left;
width: 110px;
list-style-type: none;
}
#menu li a{
background-color: black;
display: block;
font-size: 16px;
padding: 10px 18px;
border: 1px inset #ffffff;
text-decoration: none;
border-radius: 10px 10px 0 0;
color: white;
}
#menu a:hover{
background-color: blue;
color: yellow;
font-weight: bold;
border-radius: 10px 10px 0 0;
}
|
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!DOCTYPE html>
<html>
</head>
<body>
<div id="menu">
<ul>
<li> <a href="https://www.rkl.com.np"> Home </a>
<li> <a href="#"> Business </a>
<li> <a href="#"> News </a> </li>
<li> <a href="#"> Sports </a> </li>
<li> <a href="#">About US </a> </li>
</ul>
</div>
</body>
<html>
|
Check out the following too
0 comments:
Post a Comment