html - Sizing the Mega Menu to page width and centering it -
i trying make mega menu width of #header , centered middle. max-width of header 1024px. dropdown menu keeps starting @ edge of parent li. managed hack margins, that's not permanent solution means. i've removed margins sake of question.
html
<header> <div id="header"> <div class="row"> <div class="medium-3 columns"> <div id="logo"> <a href="#"><img alt="logo" src="http://dummyimage.com/174x114/828282/0011ff.png"/></a> </div> </div> <div class="medium-7 columns"> <ul class="nav clearfix animated"> <li class="border-half"><a href="#">home</a></li> <li class="border-half"> <a href="#">series</a> <div class="mega-container1"> <div style="width: 1000px; height: 290px;"></div> </div> </li> <li class="border-half"><a href="#">members</a> <div class="mega-container2"> <div style="width: 1000px; height: 290px;"></div> </div> </li> <li class="border-half"> <a href="#">about</a> <div class="mega-container3"> <ul style="width: 1000px; height: 290px;"> <li><a href="#">who are</a></li> <li><a href="#">why care</a></li> <li><a href="#">some other page</a></li> <li><a href="#">how work</a></li> </ul> </div> </li> <li class="border-half"><a href="#">contact us</a></li> </ul> </div> <div class="medium-2 columns"> </div> </div> </div> </header>
css
body {font-size: 16px; background: #cacaca;} #wrapper{width: 100%; height: 100%; padding: 0; margin: 0; background: #cacaca;} header {width: 100%; max-height: 7.188em; background: #fff; border-bottom: 0.063em solid $header-border; z-index: 1;} #header{max-width: 1024px; height: 7.125em; margin: 0 auto; padding: 0; background: #cdecde} #logo {max-width: 10.875em; max-height: 7.125em; float: left; background: #eee;} * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} .nav { background: #cdecde; max-width: 500px; height: 114px; } .nav li { list-style: none; } .nav > li { padding: 0; float: left; position: relative; } .nav > li > { float: left; color: $body-font-color; font-size: $paragraph-font-size; text-decoration: none; line-height: 114px; padding: 0 20px; height: 114px; position: relative; border-left: 1px solid #fff; } .nav > li:hover > { background: #f7f7f7; border-left: 1px solid #f1f1f1;} .nav > li:first-child > { } .nav > li:last-child > { border-right: 0;} .nav > li:hover > div { display: block; } /* mega dropdown */ .nav > li > div { position: absolute; top: 114px; display: none; background: #f7f7f7; padding: 10px 10px; box-shadow: 0 2px 3px rgba(0,0,0,0.1); overflow: hidden; border-bottom: 4px solid $primary-color; border-left: 1px solid $header-border; border-right: 1px solid $header-border; z-index: 2; max-width: 1024px; height: auto; margin: 0 auto; } .mega-container1 { left: ; } .mega-container2 { left: ; } .mega-container3 { left: ; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .border-half { border-right: 1px solid #f0f0f0; position: relative; } .border-half:before { border-left: 1px solid #cdecde; } .border-half:after { content: ''; display: block; position: absolute; height: 50px; top: 0px; right: -1px; border: 1px solid #cdecde; } .border-half:hover::after { right: -3px; }
here jsfiddle idea: http://jsfiddle.net/7e3esmpx/
update 1: explanation little confusing.
alright think have solution problem. understanding, want hidden divs appear when hovered, , take entire screen's width. correct? that:
first add position of fixed , left margin of 0 nav li divs when hovered. i.e.:
.nav > li:hover > div { display: block; position: fixed; left: 0}
change max width on nav li divs contain entire screen. i.e.:
.nav > li > div { position: absolute; top: 114px; display: none; background: #f7f7f7; padding: 10px 10px; box-shadow: 0 2px 3px rgba(0,0,0,0.1); overflow: hidden; border-bottom: 4px solid $primary-color; border-left: 1px solid $header-border; border-right: 1px solid $header-border; z-index: 2; max-width: 1800px; height: auto; margin: 0 auto; }
Comments
Post a Comment