Design Menubar in JSP

byMohd Farooq January 17, 2016
Today I am going to explain you how we create Horizontal Menubar using HTML & CSS it can be used with most of the programming language like PHP, JSP etc. This example contain Menus with Sub Menus, you need to create two files index.html & menu_style.css explain below.

Step1: index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>

     <link rel="stylesheet" type="text/css" href="menu_style.css" />
    </head>
    <body>
        <table width="100%" bgcolor="black" border="0">
            <tr><td>
                   <div class="main_menu">
            <ul>
            <li> <a href="#">Home</a></li>

     <li><a href="#" >Add Record</a>
       
    </li>
    <li> <a href="#" >Modify Record</a></li>
    <li> <a href="#" >Search</a>
    <ul><li> <a href="#" >Search Record By Name</a></li>
        <li> <a href="#">Search Record By Id</a></li></ul>
            </li>

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

     </ul>
</div>
                 </td></tr>
        </table>

     </body>
</html>

Other Related Post:  Full Background Image Code

Step2: menu_style.css

.main_menu
{
    height:40px;
    line-height:40px;
    color:red;
    position:relative;
    font-family:Arial, sans-serif;
    font-size:15px;     
}
.main_menu ul
{
    padding:0px;
    margin:0;
    list-style:none;
}
.main_menu ul li
{
    padding:0;
    margin:0;
    border-right:1px solid black;
    float:left;
    background:black;
}
.main_menu ul li a
{
    color:white;
    display:block;
    text-decoration:none;
    padding:0 25px;
}
.main_menu ul li a:hover
{
    background:lightblue;
    color:#000;
}
.main_menu ul li ul
{
     display: none;
     width: auto;
     position:absolute;
     top:30px;
     padding:0px;
     margin:0px;
}
.main_menu ul li:hover ul
{
     display: block;
     position: absolute;
     margin: 0;
     padding: 0;
}
.main_menu ul li:hover li
{
     float: none;
     list-style:none;
    margin:0px;
}
.main_menu ul li:hover li
{
    background:black;
    border-top:1px solid black;
}
.main_menu ul li:hover li a
{
    color: #fff;
    padding:0 20px;
    display:block;
    width:170px;
}
.main_menu ul li li a:hover
{
     color:#000;
}

Output:



Note: for any help in designing menubar write me in comments, i will help you.

Tags
Reactions

Post a Comment

2 Comments