Navigation menu, jquery navigation menu

Navigation menu, jquery navigation menu

I. Vertical menu

<Nav id = "nav1"> <ul> <li> <a href = "#"> index </a> </li> <a href = "# "> index22 </a> </li> <a href =" # "> index33 </a> </li> <a href = "# "> index44 </a> </li> </ul> </nav> <style> * {margin: 0; padding: 0;} nav {margin: 150px; border: 1px solid darkcyan; width: 130px; text-align: center; box-shadow: 10px 10px darkblue; background: khaki;} li {list-style: none; padding: 8px; font-size: 20px;} li + li {border-top: 1px solid red ;} a {text-decoration: none; color: #000; display: block; padding: 3px 10px;} // display: block is used to expand the parent element to expand the clickable area to the entire row a: hover {color: #069 ;}</style>

:

 

Ii. Horizontal menu

<Nav id = "nav1"> <ul> <li> <a href = "#"> index </a> </li> <a href = "# "> index22 </a> </li> <a href =" # "> index33 </a> </li> <a href = "# "> index44 </a> </li> </ul> </nav> <style> * {margin: 0; padding: 0;} nav {margin: 150px; width: pixel PX; background: khaki;} ul {overflow: hidden} // The floating li element li {list-style: none; padding: 8px; font-size: 20px; float: left;} li + li {border-left: 1px solid red;} a {text-decoration: none; color: #000; padding: 0px 10px; display: block;} a: hover {color: #069 ;} </style>

:

Iii. drop-down menu

<nav id="nav1">        <ul>        <li><a href="#">Index</a></li>                 <li><a href="#">Index22</a></li>                 <li><a href="#">Index33</a>                        <ul>                                <li><a href="#">jq</a></li>                                <li><a href="#">web</a>                    <ul>                        <li><a href="#">html</a></li>                        <li><a href="#">js</a></li>                        <li><a href="#">css</a></li>                    </ul>                </li>                                            <li><a href="#">java</a></li>            </ul>        </li>            <li><a href="#">Index44</a></li>            </ul>        </nav><style>    *{margin: 0;padding: 0;}    #nav1{margin:  150px;font-size: 20px;}    #nav1 a{        padding:.2em 1em;text-decoration: none;display: block;color: darkcyan;background-color: #eee}    #nav1 ul{float: left;}    #nav1 ul li{float: left;list-style: none;position: relative;}    #nav1 li a{display: block;border-right: solid;background-clip: padding-box;}    #nav1 li:last-child a{border-right: none;}    #nav1 li ul {display: none;}        #nav1 li ul{width: 9em;}        #nav1 li li a{border-right: none;border-top: solid;}        #nav1 li  ul{display: block;position: absolute;left: 0;top: 100%;}    #nav1 li li{float: none;}        #nav1 li li ul{display: none;}    #nav1 li ul{display: none;position: absolute;left: 0;top: 100%;}    #nav1 li:hover>ul{display: block;}        #nav1 li li ul{position: absolute;left: 100%;top: 0;}</style>

:

Vertical drop-down menu

 

Add an additional class to the outermost container nav. vertical becomes <nav id = "nav1" class = "vertical"> .... <Nav>

Then add the following css rules:

The preceding code is also omitted. The additional code is as follows:

# Nav1.vertical {width: 8em;} # nav1.vertical ul, # nav1.vertical li {float: none;} # nav1.vertical li ul {left: 100%; top: 0 }# nav1.vertical li a {border-right: none; border-top: solid ;}

: