DropDown Menu Example For Beginners

Simple DropDown Menu Example For Beginners

 I explained here simple DropDown Menu, it is easy to understand and develop for beginners. Here I used less and simple CSS Properties.

In before article I explained simple Menu Navigation, now I added DropDown Menu here.

Simple Menu Navigation     

CSS Styles:

<style>          

            ul.menu_nav{

                width: 660px; /*menu navigation width*/

                background: #bbb;

                border: 2px solid  #999;

                border-radius:5px;                    

            }

            ul.menu_nav li{

                display:inline;               

                list-style: none;               

                position: relative;               

            }

            ul.menu_nav li a{

                text-decoration: none;

                color: #FFF;

                font-family: 'Segoe UI',Arial,sans-serif;

                font-size: 16px;

                font-weight:  bold;

                padding: 10px 15px;

                display: inline-block;

            }

           ul.menu_nav a:hover{

                background:  #999;

                color: #8fde62;              

            }

/*this below CSS Styles for drop down menu */

           ul.menu_nav li ul,ul.menu_nav ul{

                visibility: hidden;

                opacity:0;

                list-style: none;

                position: absolute;

                background: #666666;

                left: 0;

                margin: 0px;

                padding: 0px;

                border-radius:5px;

            }

            ul.menu_nav ul li{

                clear: both;

                width: 100%;

                height: 0px;

                padding: 0px;

            }

            ul.menu_nav ul li a{

                clear: both;

                display:inline-block;

              width:100px;      

            }

            ul.menu_nav li:hover>ul{

                visibility:  visible;

                opacity:1;

            }

            ul.menu_nav ul li a:hover{

                background:  #333333;

            }

                </style>

  HTML File:

        <ul class="menu_nav">

            <li><a href="">Home</a></li>

             <li><a href="">Materials</a>

                 <ul>

                         <li>  <a href="">Groups</a></li>

                         <li>  <a href="">Civil</a></li>

                        <li>   <a href="">Bank Clerk/PO&apos;s</a></li>

                        <li>   <a href="">RRB</a></li>  

              </ul>

             </li>

              <li><a href="">Notifications</a></li>

               <li><a href="">About Us</a></li>

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

        </ul>

• Home
• Materials
  • Groups
  • Civil
  • Bank Clerk/PO's
  • RRB
• Notifications
• About Us
• Contact Us

Accordions with HTML5 tags

Simple Accordions with HTML5 tags:

In this article i explained Accordions with clear example using HTML5 tags and CSS Properties. This is the basic Accordion example,it is easy to understand


HTML File:
   <div id="container">
            <details class="box">
                <summary class="title">
                    Heading One
                </summary>
                <p>
                    content here.......
                </p>
            </details>
             <details class="box">
                <summary class="title">
                    Heading Two
                </summary>
                <p>
                    content here.......
                </p>
            </details>
             <details class="box">
                <summary class="title">
                    Heading Three
                </summary>
                <p>
                    content here.......
                </p>
            </details>
        </div>

 This CSS Properties is useful for background color,width,height,border. we can develop basic  accordions without this below CSS properties.

CSS Properties :

#container{ 
 width: 500px;
 height: auto;
 background: #F2F2F2; 
border: 1px solid #999;
 }
 .box{
 width: 500px;
 height: auto;
 background: #ccc; 
border: 1px solid #999;
 }
 .title{
 height: 30px;
 background: #999; 
cursor: pointer; 
 }

Simple css menu navigation with example

Simple CSS menu navigation with example

This tutorial is useful to beginners

We saw menu navigation in many websites, in many cases, as well as menu navigation is very important for develop the website.

So we can learn clearly about menu navigation below and I explained each and every line clearly with an example

HTML Code:

<ul class=”menu_nav”>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Services</a></li>

<li><a href=”#”>Clients</a></li>

<li><a href=”#”>About Us</a></li>

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

</ul>

In above HTML example we used <ul>,<li>,<a> tags

<ul>  “ unorder list “ : it is display the list in unorder.

<li> “ list “ :it is display the text in list.

<a> “ anchor ”, href is  attribute. Here it is used as link.

CSS Styles:

ul.menu_nav

{

width: 660px;  /*menu navigation width*/

background: #bbb;  /*background color for menu navigation */

border: 2px solid #999;  /*menu navigation border line size and color*/

border-radius:5px;  /*menu navigation 4 border turning point radius, it is display like curve type*/

}

In above css styles “ menu_nav “ is a class

ul.menu_nav li

{

display: inline;

 }

inline :

This value causes an element to generate one or more inline boxes. 

ul.menu_nav li a

{

text-decoration: none;  

color: #FFF;

font-family: 'Segoe UI',Arial,sans-serif;

font-size: 16px;

 font-weight: bold;

 padding: 10px 15px;   /*it is shows the width and height */

 display: inline-block;

 }

inline-block

This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element. 

ul.menu_nav a:hover

{

 background: #999;

color: #8fde62;

}

When mouse is moved over an element, that will change the background color and text color.

• Home
• Services
• Clients
• About Us
• Contact Us