javascript - How to create a dropdown menu without messing up the rest of the code....? -
i know question has been asked before million times, can't seem find answer or solution fits exact situation or code. (if there one, please link me!)
i'm trying create simple dropdown menu on horizontal navigation has logo image centered links on either side. have bootstrap installed, can't seem figure out simple way code using framework, said screw , built 1 scratch.
it doesn't have straight html/css, i'm not super familiar js (still learning).
here's current code:
#header { height: 40px; position: relative; margin: 80px auto 0; } #header ul { margin: 0 auto; width: 800px; padding: 0; list-style: none; } #header ul li { float: left; width: 97px; } #header ul li:nth-of-type(4) { margin-left: 217px; } #header ul li { text-transform: lowercase; text-decoration: none; display: block; text-align: center; padding: 12px 0 0 0; height: 28px; color: #000; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; } #header ul li a:hover { color: #c4c4c4; } .logo { position: absolute; left: 50%; margin: -60px 0 0 -124px; } @media screen , (max-width: 800px) { .logo { bottom: 100%; } #header ul li:nth-of-type(4) { margin-left: 0; } #header ul { width: 600px; position: relative; } }<div id="header"> <a class="logo"><img src="http://www.susanhudsonphotography.com/blog/wp-content/uploads/p4/images/logo_1368744984.jpg" alt="whatever photography" height="140" width="230" /></a> <ul> <li><a href="">about</a></li> <li><a href="">galleries <span class="caret"></span></a></li> <ul class="sub-menu"> <!--if comment out sub-menu, you'll see navigation want look--> <li><a href="">portraits</a></li> <li><a href="">landscapes</a></li> <li><a href="">personal</a></li> </ul> <li><a href="">blog</a></li> <li><a href="">info/rates</a></li> <li><a href="">prints</a></li> <li><a href="">contact</a></li> </ul> </div>another problem i'm encountering when resize viewport mobile size, logo image moves top of nav links , half of hidden out of view. though that's whole separate issue...
i modified code bit, try this.
#header { height: 40px; position: relative; margin: 80px auto 0; } #header ul { margin: 0 auto; width: 800px; padding: 0; list-style: none; } #header ul li { float: left; width: 97px; } #header ul li:nth-of-type(4) { margin-left: 217px; } #header ul li { text-transform: lowercase; text-decoration: none; display: block; text-align: center; padding: 12px 0 0 0; height: 28px; color: #000; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; } #header ul li a:hover { color: #c4c4c4; } .logo { position: absolute; left: 50%; margin: -60px 0 0 -124px; } @media screen , (max-width: 800px) { .logo { bottom: 100%; } #header ul li:nth-of-type(4) { margin-left: 0; } #header ul { width: 600px; position: relative; } ul.sub-menu { display: none; position: absolute; top: 0; left: 0; width: auto!important; overflow: hidden; padding: 0 1em; z-index: 2; background: white; } .sub-menu li { display: block; float: none!important; } .more { position: relative; } .more:hover .sub-menu { display: inline-block; }<div id="header"> <ul> <li><a href="">about</a></li> <li class="more"><a href="">galleries <span class="caret"></span></a> <ul class="sub-menu"> <li><a href="">portraits</a></li> <li><a href="">landscapes</a></li> <li><a href="">personal</a></li> </ul> </li> <li><a href="">blog</a></li> <li> <a class="logo"><img src="http://www.susanhudsonphotography.com/blog/wp-content/uploads/p4/images/logo_1368744984.jpg" alt="whatever photography" height="140" width="230" /></a></li> <li><a href="">info/rates</a></li> <li><a href="">prints</a></li> <li><a href="">contact</a></li> </ul> </div>
Comments
Post a Comment