How to create Horizontal Menubar with CSS?

           2 comments   
Creating a Horizontal Menubar is not so difficult but requires your attention towards each small part of the menubar.

Creating horizontal menubar is not so difficult as it seems.

If you want to learn how to create a stunning horizontal menubar then give it is try.

You can test this coding in our latest online editor 2015.

<html>
<head>
<style type="text/css">
* 
{
   margin: 0; padding: 0;
}

 body 
{
   font-family: 'Lucida Grande';
   font-size: 10px;
   background: #eeeeee;
}

 .navigation 
{
   margin: 200px 20px;
   background: #fff;
   overflow: hidden;
   width: 760px;

   box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.5);
}

 .navigation li 
{
   width: 120px; border-left: 5px solid #666;
   float: left;
   //cursor: pointer;
   list-style-type: none;
   padding: 10px 50px 10px 15px;

   -webkit-transition: all 0.3s ease-in;
   -moz-transition: all 0.3s ease-in;
   -o-transition: all 0.3s ease-in;
}

 .navigation li h2 
{
   font-family: georgia;
   font-weight: normal;
   font-style: italic;
   font-size: 12px;
   margin-bottom: 5px;
   line-height: 16px;
}

 .navigation li p
{
   font-size: 11px;
   color: #999;
 
   -webkit-transition: all 0.1s ease-in;
   -moz-transition: all 0.1s ease-in;
   -o-transition: all 0.1s ease-in;
}
.navigation li:hover 
{
   background: #333;
   border-left: 5px solid #000;
}
.navigation li:hover h2 
{
   font-weight: bold;
   color: #fff;
}
.navigation li:hover p 
{
   color: #ccc;
   padding-left: 5px;
}
</style>
</head>
<body>
<ul class="navigation">
<li>
   <h2>Home</h2>
   <p>Learn CSSBasicTips</p>
</li>
<li>
   <h2>LearningZone</h2>
   <p>CSS/HTML/Webpage</p>
</li>
<li>
   <h2>About</h2>
   <p>Who we are?</p>
</li>
<li>
   <h2>Contact us</h2>
   <p>For more Coding</p>
</li>
</ul>
</body>
</html>

Output for Horizontal Menubar:-

  • Home

    Learn CSSBasicTips

  • LearningZone

    CSS/HTML/Webpage
If you have any doubt or facing any difficulty in getting output, do let us know.

2 comments:

  1. Karen JainNovember 28, 2016 at 4:16 AM

    A good rule of thumb when mapping out the site is to ensure that all important content is within three clicks away from any other point or web page.
    Internet Marketing Company in Bangalore | Web Designers Bangalore

    ReplyDelete
  2. AnonymousDecember 29, 2016 at 10:20 PM

    Helpful as always. Every post you write produce a massive value to your readers that is the only reason it is so popular and has great authority.check out here School website design uk

    ReplyDelete