IntroductionToWebPart6

How To design Horizontal and vertical menu bars using html and css

Html page ➢Menu_bar.html

<!DOCTYPE html>
<html>
<head>
<title>Menu Bars Demo</title>
<link rel="stylesheet" href="cssMenu.css" type="text/css"/>
</head>
<body>
<!-- Horizontal naviagtion bar //-->
<ul id="h_bar">
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact us</a></li>
</ul>
<!-- Vertical Navigation Bar //-->
<ul id="v_bar">
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact us</a></li>
</ul>
</body>
</html> 

Css Sheet ➢cssMenu.css

/* CSS Document */
*{
    margin:0;
    padding:0;
}
/* horizontal navigation bar */
#h_bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
#h_bar li {
    float: left; /* After Completing one List tag it automatcally placed another list tag with out any line breaks */
}
#h_bar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
#h_bar li a:hover {
    background-color: #111;
}
/* Vertical navigation bar */
#v_bar li{
    float:none;
}
#v_bar{
    background-color: #660033;
    height:100vh;
    width:23%;
}
#v_bar li a{
    font-size:24px;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
#v_bar li a:hover{
    background-color:#fff;
    color:#000;
}
If you want to see how its runs in actual browser.

Next➱

⭅ Prev