How to add Dynamic menu using css3?

How to insert Dynamic menu using Css3?

Which Css is use to create Dynamic menu?

Using Css3we can create Dynamic menu

  • Follow the bellow Css3.
  • Create Dynamic menu using css3.

    
    nav {
    /* Repeating background image */
    background-color:#666;
    width:180px;
    
    }
    
    nav ul {
    /* Removes bullet points */
    list-style:none;
    margin:0;
    padding:0;
    
    }
    nav ul li {
    /* Any child positioned absolutely will be positioned relative to this */
    position:relative;
    border-bottom:solid 1px #818181;
    }
    nav a {
    color:#CCC;
    padding:12px 0px;
    /* Fill all available horizontal space */
    display:block;
    /* Remove underline */
    text-decoration:none;
    /*
    New CSS3 animations:
    apply transition to background property, taking 1s to change it
    */
    transition:background 1s;
    -moz-transition:background 1s;
    -webkit-transition:background 1s;
    -o-transition:background 1s;
    font-family:tahoma;
    font-size:13px;
    text-transform:none;
    padding-left:20px;
    }
    nav a:hover {
    /*
    RGBA background for transparancy:
    last number(0.05) is the transparency
    */
    background-color:#C60;
    color:#fff;
    
    }
    nav a:hover span {
    background:#FFF;
    transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    }
    nav ul li:hover ul {
    display:block;
    }
    nav ul ul {
    position:absolute;
    left:180px;
    top:0;
    border-top:1px solid #e9e9e9;
    display:none;
    }
    nav ul ul li {
    width:180px;
    background:#f1f1f1;
    border:1px solid #e9e9e9;
    border-top:0;
    border-bottom:solid 1px #CCC;
    }
    nav ul ul li a {
    color:#a8a8a8;
    font-size:12px;
    text-transform:none;
    }
    nav ul ul li a:hover {
    color:#FFF;
    }
    nav span {
    width:12px;
    height:12px;
    background:#fff;
    display:inline-block;
    float:left;
    margin-top:3px;
    margin-right:20px;
    position:relative;
    transition:all 0.5s;
    -moz-transition:all 0.5s;
    -o-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    }
    nav span:before {
    content:"";
    width:12px;
    height:2px;
    background:#3a3b3b;
    position:absolute;
    left:0px;
    top:5px;
    }
    nav span:after {
    content:"";
    width:2px;
    height:12px;
    background:#3a3b3b;
    position:absolute;
    left:5px;
    position:top;
    }
    

About the Author

avatar