December 06, 2015

Create a Horizontal Menu

Here I will be going along through the process of creating a nice looking horizontal menu. Further, I will be designing the menu using CSS. A navigation menu  is an  important  part  of  creating a  good looking  website. To
make it look a bit fancy and eye catching. I have added a colorful hover on the menu.

Here is the code for creating a Horizontal Menu.

HTML
       <html>
       <body>
        <div id="container">

                 <div id="top-bar">

                     <div id="top-menu">
                         <ul>
                             <li id="news">
                                 News
                             </li>
                             <li id="tech">
                                 Tech
                             </li>
                             <li id="android">
                                 Android
                             </li>
                             <li id="windows">
                                 Windows
                             </li>
                             <li id="others">
                                 Others
                             </li>
                             <li id="about">
                                 About
                             </li>

                         </ul>

                 </div>

           </body>
           </html>

CSS
  body {
        font-family: Arial, sans-serif;
        margin:0;
        line-height:20px;

        }

        #top-bar {
                 width:100%;
                 height:46px;
                 background-color:#15a226;
                 margin:0;
        }


        #top-menu ul {
                 float:left;
                 padding:0;
                 margin:0;

        }


        #top-menu li {

                 float:left;        
                 color:#ffffff;       
                 list-style:none;
                 padding: 14px 20px 0 20px;
        }

                 #top-menu li:hover {
                 height:28px;
        }



        #news:hover {
                 border-bottom:4px solid #ed3482;
        }

        #tech:hover {
                 border-bottom:4px solid #00e2ff;
        }

        #android:hover {
                 border-bottom:4px solid #9d0a43;
        }

        #windows:hover {
                 border-bottom:4px solid #ed8234;
        }

        #others:hover {
                 border-bottom:4px solid #7d24ac;
        }

        #about:hover {
                 border-bottom:4px solid #0c580f;
        }


RESULT


  • News
  • Tech
  • Android
  • Windows
  • Others
  • About



END...

No comments :

Post a Comment