html - Code for making a drop down navigation bar responsive -
so have tried code drop down responsive navigation bar, navigation bar there problem not responsive. put code down below. appreciated if tell me additional code needed add appreciated. if needed add javascript fine.
html
<!doctype html> <html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html; charset=us-ascii"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> <title>home|tourist advice|explore new zealand</title> </head> <body> <ul class="css3menu"> <li class="active"><a href=""><span>home</span></a></li> <li class="has-sub"><a href="aboutnewzealand.html"><span>about new zealand</span></a> <ul> <li class="has-sub"><a href="#"><span>south island</span></a> <ul> <li><a href="aboutnewzealand/marlborough.html"><span>marlborough</span></a></li> <li><a href="aboutnewzealand/nelson.html"><span>nelson</span></a></li> <li><a href="aboutnewzealand/westcoast.html"><span>west coast</span></a></li> <li><a href="aboutnewzealand/canterbury.html"><span>canterbury</span></a></li> <li><a href="aboutnewzealand/queenstown-lakes.html"><span>queenstown lakes</span></a></li> <li><a href="aboutnewzealand/fiordland.html"><span>fiordland</span></a></li> <li><a href="aboutnewzealand/otago.html"><span>otago</span></a></li> <li class="last"><a href="aboutnewzealand/southland.html"><span>southland</span></a></li> </ul> </li> </ul> </li> <li class="has-sub"><a href="accommodation.html"><span>accommodation</span></a> <ul> <li class="has-sub"><a href="#"><span>south island </span></a> <ul> <li><a href="accommodation/marlborough.html"><span>marlborough</span></a></li> <li><a href="accommodation/nelson.html"><span>nelson</span></a></li> <li><a href="accommodation/westcoast.html"><span>west coast</span></a></li> <li><a href="accommodation/canterbury.html"><span>canterbury</span></a></li> <li><a href="accommodation/queenstown-lakes.html"><span>queenstown lakes</span></a></li> <li><a href="accommodation/fiordland.html"><span>fiordland</span></a></li> <li><a href="accommodation/otago.html"><span>otago</span></a></li> <li class="last"><a href="accommodation/southland.html"><span>southland</span></a></li> </ul> </li> </ul> </li> <li class="has-sub"><a href="attractions.html"><span>attractions & activities</span></a> <ul> <li class="has-sub"><a href="#"><span>south island </span></a> <ul> <li><a href="attractions&activities/marlborough.html"><span>marlborough</span></a></li> <li><a href="attractions&activities/nelson.html"><span>nelson</span></a></li> <li><a href="attractions&activities/westcoast.html"><span>west coast</span></a></li> <li><a href="attractions&activities/canterbury.html"><span>canterbury</span></a></li> <li><a href="attractions&activities/queenstown-lakes.html"><span>queenstown lakes</span></a></li> <li><a href="attractions&activities/fiordland.html"><span>fiordland</span></a></li> <li><a href="attractions&activities/otago.html"><span>otago</span></a></li> <li class="last"><a href="attractions&activities/southland.html"><span>southland</span></a></li> </ul> </li> </ul> </li> <li class="has-sub last"><a href="dining.html"><span>dining</span></a> <ul> <li class="has-sub"><a href="#"><span>south island </span></a> <ul> <li><a href="dining/marlborough.html"><span>marlborough</span></a></li> <li><a href="dining/nelson.html"><span>nelson</span></a></li> <li><a href="dining/westcoast.html"><span>west coast</span></a></li> <li><a href="dining/canterbury.html"><span>canterbury</span></a></li> <li><a href="dining/queenstown-lakes.html"><span>queenstown lakes</span></a></li> <li><a href="fiordland.html"><span>fiordland</span></a></li> <li><a href="otago.html"><span>otago</span></a></li> <li class="last"><a href="southland.html"><span>southland </span></a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html> css
.css3menu { width: 100%; margin: 0; padding: 3px 0 3px 0; list-style: none; background: #111; background: -moz-linear-gradient( top, #2da2de 0%, #2da2de 16%, #2da2de); background: -webkit-gradient( linear, left top, left bottom, from(#2da2de), color-stop(0.16, #2da2de), to(#2da2de)); background: -ms-linear-gradient( top, #2da2de 0%, #2da2de 16%, #2da2de 100%); background: -o-linear-gradient( top, #2da2de 0%, #2da2de 16%, #2da2de 100%); background: linear-gradient( bottom, #2da2de 0%, #2da2de 16%, #2da2de 100%); -moz-border-radius: 14px; -webkit-border-radius: 14px; border-radius: 14px; border: 0px solid #2795ce; -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.0), inset 0px 0px 2px rgba(254,255,255,1); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.0), inset 0px 0px 2px rgba(254,255,255,1); box-shadow: 0px 0px 3px rgba(0,0,0,0.0), inset 0px 0px 2px rgba(254,255,255,1); } .css3menu li{ float: left; padding: 0px 8px 0px 0px; position: relative; } .css3menu li:first-child{ margin: 0 0 0 25px; border-left: 0px; } .css3menu li:last-child{ border-right: 0px; } .css3menu li:hover{ background: -moz-linear-gradient( top, rgba(255, 56, 92, 0.10) 0%, rgba(37, 139, 193, 0.10) 25%, rgba(45, 162, 222, 0.10) 50%, rgba(48, 180, 250, 0.10) 75%, rgba(48, 180, 250, 0.10)); background: -webkit-gradient( linear, left top, left bottom, from(rgba(255, 56, 92, 0.10)), color-stop(0.25, rgba(37, 139, 193, 0.10)), color-stop(0.50, rgba(45, 162, 222, 0.10)), color-stop(0.75, rgba(48, 180, 250, 0.10)), to(rgba(48, 180, 250, 0.10))); background: -ms-linear-gradient( top, rgba(255, 56, 92, 0.10) 0%, rgba(37, 139, 193, 0.10) 25%, rgba(45, 162, 222, 0.10) 50%, rgba(48, 180, 250, 0.10) 75%, rgba(48, 180, 250, 0.10) 100%); background: -o-linear-gradient( top, rgba(255, 56, 92, 0.10) 0%, rgba(37, 139, 193, 0.10) 25%, rgba(45, 162, 222, 0.10) 50%, rgba(48, 180, 250, 0.10) 75%, rgba(48, 180, 250, 0.10) 100%); background: linear-gradient( bottom, rgba(255, 56, 92, 0.10) 0%, rgba(37, 139, 193, 0.10) 25%, rgba(45, 162, 222, 0.10) 50%, rgba(48, 180, 250, 0.10) 75%, rgba(48, 180, 250, 0.10) 100%); } .css3menu li:active{ background: rgba(255, 0, 0, 0.10); } .css3menu a{ float: left; padding: 10px 10px; color: #999; font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 16px; text-decoration: none; text-shadow: 0px 0px 0px rgba(0,0,0,0.6), 0px 0px 7px rgba(254,255,255,0.1); } .css3menu a:hover{ color: #ffffff; } .css3menu a:active{ color: #ffffff; } .css3menu li:hover > ul{ display: block; } .css3menu li:active > ul{ display: block; } .css3menu ul{ list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 36px; left: 0; z-index: 99999; background: -moz-linear-gradient( top, #ffffff 0%, #ebf4c3); background: -webkit-gradient( linear, left top, left bottom, from(#ffffff), to(#ebf4c3)); background: -ms-linear-gradient( top, #ffffff 0%, #ebf4c3 100%); background: -o-linear-gradient( top, #ffffff 0%, #ebf4c3 100%); background: linear-gradient( bottom, #ffffff 0%, #ebf4c3 100%); -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; border: 1px solid #6d8000; } .css3menu ul li{ border-left: 0px; border-right: 0px; float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 1px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 1px 0 #777777; box-shadow: 0 1px 0 #111111, 0 1px 0 #777777; } .css3menu ul li:first-child{ padding-left: 0px; margin: 0; } .css3menu ul li:last-child{ -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .css3menu ul li:hover{ background: rgba(255, 0, 0, 0.10); } .css3menu ul li:active{ background: rgba(255, 0, 0, 0.10); } .css3menu ul a{ color: #141414; padding: 10px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; height: 16px; width: 180px; } .css3menu ul a:hover{ color: #141414; } .css3menu ul a:active{ color: #ffffff; } .css3menu ul li:first-child a{ -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .css3menu ul li:first-child a:hover:after{ border-bottom-color: #04acec; } .css3menu ul li:last-child a{ -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } .css3menu:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .mainmenuicondata { line-height: 16px; float: left; padding-right: 10px; } .submenuicondata { line-height: 16px; float: left; padding-right: 10px; } .mainmenuicondata.icon1 { padding-right: 18px; background: url("bottom.png") no-repeat 0 -4px; background-size: 8px 8px; background-position: right center; min-height: 8px; }
the menu have not best solution mobile devices say. but, if keep style recommend adding media rules below css have menu items centered on smaller screens @ least.
@media screen , (max-width: 682px){ .css3menu a{ display: inline-block; float: none; text-align: center; } .css3menu { text-align: center; } .css3menu > li{ float: none; width: 60%; margin: 0 auto; } .css3menu > li:first-child{ margin: 0 auto; } }
Comments
Post a Comment