I am trying to make a mega menu that will be the width of the #header and also centered to the middle. The max-width of the header is 1024px. However the dropdown menu keeps starting at the edge of the parent li. I managed to hack it with margins, but that's not a permanent solution by any means. I've removed the margins for the sake of this question.
HTML
<header>
<div id="header">
<div class="row">
<div class="medium-3 columns">
<div id="logo">
<img alt="logo" src="http://dummyimage.com/174x114/828282/0011ff.png"/>
</div>
</div>
<div class="medium-7 columns">
<ul class="nav clearfix animated">
<li class="border-half">Home</li>
<li class="border-half">
Series
<div class="mega-container1">
<div style="width: 1000px; height: 290px;"></div>
</div>
</li>
<li class="border-half">Members
<div class="mega-container2">
<div style="width: 1000px; height: 290px;"></div>
</div>
</li>
<li class="border-half">
About
<div class="mega-container3">
<ul style="width: 1000px; height: 290px;">
<li>Who We Are</li>
<li>Why We Care</li>
<li>Some other page</li>
<li>How We Work</li>
</ul>
</div>
</li>
<li class="border-half">Contact Us</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 > a {
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 > a { background: #F7F7F7; border-left: 1px solid #f1f1f1;}
.nav > li:first-child > a { }
.nav > li:last-child > a { 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 is a JSFiddle to get the idea: http://jsfiddle.net/7e3esmpx/
Update 1: The explanation was a little confusing.
Alright I think I have a solution to your problem. From my understanding, you want the hidden divs to appear when hovered, and take up the entire screen's width. Is that correct? To do that:
First add the position of fixed and a left margin of 0 to your nav li divs when they are hovered. i.e.:
.nav > li:hover > div { display: block;
position: fixed;
left: 0}
Change the max width on your nav li divs to contain the 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;
}
The issue is that the UL had a certain width. And the dropdown was the same size of the UL meaning that if I resize the UL I should get the same width. So anyone having a similar issue, check your UL.
Related
I've been following this tutorial:
http://www.mrc-productivity.com/techblog/?p=1049
I want to make a single item in the navigation bar float to the right, but simply adding float:right; to that particular item didn't do anything. In fact, changing the float:left to float:right only reversed the ordering of the navigation bar items.
Here's a snippet:
#CHARSET "UTF-8";
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
height: 50px;
margin: 0;
z-index: 99;
position: relative;
background-color: #366b82;
}
.navbar {
height: 50px;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #54879d;
}
.navbar li {
height: auto;
width: 150px;
float: left;
text-align: center;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}
#navright {
float: right;
}
.navbar a {
padding: 18px 0;
border-left: 1px solid #54879d;
border-right: 1px solid #1f5065;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover, a:hover {
background-color: #54879d;
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
background-color: #54879d;
}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {
background-color: #366b82;
}
<body>
<div id="wrap">
<ul class="navbar">
<li>Home</li>
<li>Registers
<ul>
<li>People</li>
</ul>
</li>
<li>Operational</li>
<li>Financial</li>
<li>Reports</li>
<li id="navright"><a id="logout" href="/login">Logout</a></li>
</ul>
</div>
</body>
<li id="navright"><a id="logout" href="/login">Logout</a></li>
Just need to get that "Logout" button to be on the right.
Make the containing UL element have a width of 100%
.navbar {
height: 50px;
width: 100%;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #54879d;
}
https://jsfiddle.net/txve55jn/2/
I have a playlist as overlay for videos which should be scrollable.
.playlist{
height: 150px;
overflow-y: scroll;
border: 3px solid red;
}
.playlist li:before {
content: " ";
display: block;
height: 50px;
border: 1px solid #000;
}
.playlist li {
height: 50px;
}
.playlist li span {
display: block;
height: 50px;
position: relative;
top: -50px;
left: 10px;
}
A jsfiddle example of the situation here: http://jsfiddle.net/41unLxwk/4/
I use :before selector to display play- and pause buttons and the text is positioned relative. In this scenario there will be blank space in the end (only in firefox).
I know this does not happen if you do not use :before and relative positioning, but maybe there is another way to fix this.
edit: To clarify, the problem is that in firefox there is too much overflow-y in this example. I am not talking about the x-axis.
The problem is that the offset of relative positioned elements doesn't affect the other elements, so you see the space that where span would be if you didn't move them.
You can fix it adding
.playlist > ul {
overflow: hidden;
}
.playlist {
height: 150px;
overflow-y: scroll;
border: 3px solid red;
}
.playlist ul {
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.playlist li:before {
content: " ";
display: block;
height: 50px;
border: 1px solid #000;
}
.playlist li:not(:first-child):before {
border-top: none;
}
.playlist li {
height: 50px;
}
.playlist li span {
display: block;
height: 50px;
position: relative;
top: -50px;
left: 10px;
}
<div class="playlist">
<ul>
<li>
<span>Song_1</span>
</li>
<li>
<span>Song_2</span>
</li>
<li>
<span>Song_3</span>
</li>
<li>
<span>Song_4</span>
</li>
<li>
<span>Song_5</span>
</li>
</ul>
</div>
However, consider something simpler like
.playlist > ul > li {
height: 50px;
border: 1px solid #000;
margin-top: -1px;
}
.playlist > ul > li:last-child {
border-bottom: none;
}
.playlist {
height: 150px;
overflow-y: scroll;
border: 3px solid red;
}
.playlist > ul {
list-style: none;
padding: 0;
margin: 0;
}
.playlist > ul > li {
height: 50px;
border: 1px solid #000;
margin-top: -1px;
}
.playlist > ul > li:last-child {
border-bottom: none;
}
<div class="playlist">
<ul>
<li>Song_1</li>
<li>Song_2</li>
<li>Song_3</li>
<li>Song_4</li>
<li>Song_5</li>
</ul>
</div>
I have a horizontal menubar, and having an issue with the sub-menus. I want the sub-menus to have the same width with their headers(top li?).
Fiddle
I know one way to solve the problem, by giving fixed width to top li elements, but I don't want that. I want each category to have its own width. Is there an alternative way to fix this?
<div id="header">
<div class="container">
<div class="menu-container">
<ul id="menu">
<li>Home</li>
<li>aaaaaaaaaa
<ul>
<li>blabla</li>
<li>bla bla</li>
<li>blabla bla</li>
</ul>
</li>
<li>bbbbbbbbbb
<ul>
<li>blabla</li>
<li>bla bla blabla</li>
</ul>
</li>
<li>cccccccc
<ul>
<li>bla</li>
</ul>
</li>
<li>ddddd</li>
</ul>
</div>
</div>
</div>
<div id="content" class="wrapper"></div>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: auto;
}
body {
background: rgb(36,36,36);
font: normal 100% Arial, Verdana, sans-serif;
}
#header {
background: rgb(16,16,16);
border-top: 3px solid rgb(32,32,32);
border-bottom: 1px solid rgb(32,32,32);
z-index: 100;
}
.container {
width: 960px;
margin: 0 auto;
position: relative;
}
.menu-container {
display: table;
margin: 0 auto;
}
#header ul {
padding: 0;
margin: 0;
list-style: none;
background: rgb(16,16,16);
}
#header ul li {
height: auto;
text-align: center;
width: 130px;
}
#menu {
overflow: auto;
z-index: 100;
width: 665px;
margin: 0 auto;
}
#menu a {
display: block;
padding: 20px;
font-size: 18px;
text-align: center;
font-family: sans-serif;
text-transform: uppercase;
text-decoration: none;
color: WhiteSmoke;
border-right: 1px solid #1d1d1d;
}
#menu a:hover {
color: white;
background: rgb(50,50,50);
}
#menu > li {
float: left;
}
#menu > li.active {
background: rgb(50,50,50);
}
#menu li:nth-child(1) {
border-left: 1px solid rgb(32,32,32);
}
#menu li:hover > ul {
display: block;
}
#menu li ul {
display: none;
z-index: 100;
width: auto;
position: absolute;
}
#menu li ul a {
padding: 10px 0;
}
#menu li ul li {
border-left: 1px solid rgb(32,32,32);
border-bottom: 1px solid rgb(32,32,32);
font-size: .8em;
}
#menu li ul li:nth-child(1) {
border-top: 1px solid rgb(32,32,32);
}
.wrapper {
width: 100%;
min-height: 500px;
overflow: auto;
background: rgb(36,36,36);
border-top: 1px solid rgb(55,55,55);
}
I applied these styles on top of your styles and they seem to have done what you want. (non-fixed width top menu where second layer scales to width of thing above it).
.menu-container { }
.menu-container #menu { width: auto; overflow: visible; height: 60px; }
.menu-container #menu li { position: relative; display: block; width: auto; }
.menu-container #menu li ul { display: none; width: 100%; }
.menu-container #menu li:hover ul { display: block; }
.menu-container #menu li ul li { display: block; width: 100%; }
Here's the fiddle with modified code: http://jsfiddle.net/3zj6E/1/.
The following CSS rule sets were changed:
#menu {
overflow: auto;
z-index: 100;
display: table;
margin: 0 auto;
}
#menu > li {
float: left;
position: relative;
}
#menu li ul {
display: none;
z-index: 100;
position: absolute;
width: 100%;
}
I was able to successfully create a navigation menu with a submenu that appears on hover. However, I would like my submenus to have columns. I used Vanga Sasidhar's tips on creating the hover nav, I now need to create the columns under the Solutions and Support menu items.
Here is my jsfiddle: http://jsfiddle.net/DKu7p/.
Here is my CSS:
.site-nav li {
display:block;
float:left;
list-style:none;
margin: 0;
position: relative;
width: 100px;
}
.site-nav li:hover {
background:#1f78c3;
cursor:pointer;
}
.site-nav li a {
color:#696969;
display:block;
text-align:center;
text-decoration:none;
padding:5px 10px;
}
.site-nav li a:hover {
color:#00598B;
display:block;
text-align:center;
text-decoration:none;
padding:5px 10px;
}
.site-nav .dropdown {
display : none;
position : relative;
}
.site-nav .dropdown li { float : none; }
.site-nav li:hover .dropdown { display : block; position: relative; }
.dropdown {
background: #fff;
border: 1px solid #fff;
border-top: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
list-style: none;
margin: 4px 0 0 -9px;
min-width: 150px;
overflow: hidden;
padding: 0;
position: relative;
z-index: 999;
}
.dropdown li {
border: 0;
border-radius: 0;
clear: both;
float: none;
font-size: .9em;
margin: 0;
width: 100%;
}
.dropdown li span {
display: none !important;
}
.dropdown li a {
background: none;
color: #333;
display: block;
font-size: 1.1em;
font-weight: normal;
padding: 5px 8px;
text-align: left;
text-shadow: none;
}
.dropdown li a:hover {
background: #ddd;
color: #0c84bb;
text-decoration: none;
}
.dropdown .last a {
border-bottom: none;
}
Ok, here my try:
Apply the three column css layout
.col-columned{
width: 450px;
}
.col-maincontainer{
width: 450px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
.col-maincontainer ul, .col-maincontainer ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.col-contentwrapper{
float: left;
width: 100%;
}
.col-contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}
.col-leftcolumn{
float: left;
width: 150px; /*Width of left column in pixel*/
margin-left: -450px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}
.col-rightcolumn{
float: left;
width: 150px; /*Width of right column*/
margin-left: -150px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}
.col-innertube{
margin: 3px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
And then, add a new element with the html markout of three columns:
<a class="drop-link">Example1</a>
<ul class="dropdown col-columned">
<li>
<div class="col-maincontainer">
<div class="col-contentwrapper">
<div class="col-contentcolumn">
<div class="col-innertube">
<div class="wiki-tree">
<ul>
<li><a class="dropdown-title">topic1</a></li>
<li><a class="dropdown-title">topic2</a></li>
<li><a class="dropdown-title">topic3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-leftcolumn">
<div class="col-innertube">
<div class="wiki-tree">
<ul>
<li><a class="dropdown-title">topic1</a></li>
<li><a class="dropdown-title">topic2</a></li>
<li><a class="dropdown-title">topic3</a></li>
</ul>
</div>
</div>
</div>
<div class="col-rightcolumn">
<div class="col-innertube">
<div class="wiki-tree">
<ul>
<li><a class="dropdown-title">topic1</a></li>
<li><a class="dropdown-title">topic2</a></li>
<li><a class="dropdown-title">topic3</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
Make sure to add the col-columned to the dropdown element like this:
<ul class="dropdown col-columned">
Here the live example: http://jsfiddle.net/8fgG5/1/
I had a mouseover submenu working very nicely on my site (so nicely in fact that it was working exactly right in Chrome, IE 7 & 8, and FF), but now it's broken somehow and I can't see the problem.
Here's the CSS:
.MainMenu {
width: 90% !important;
min-width: 800px;
height: 42px !important;
padding: 0 0 0 10%;
overflow: hidden;
border-top: 1px solid #0054a6;
border-bottom: 1px solid #0054a6;
background: transparent url("Images/ServiceMenuBG.png");
background-repeat: repeat-x;
}
.MainMenu ul {
padding: 0;
margin:0;
list-style: none;
}
.MainMenu li {
float: left;
position: relative;
height: 31px;
width: 150px;
padding: 11px 0 0 0;
text-align: center;
border-right: 1px solid #0054a6;
}
.MainMenuItem#First { border-left: 1px solid #0054a6; }
.MainMenuItem a {
color: #ffffff;
display: block;
height: 31px;
width: 150px;
font-weight: bold;
text-decoration: none;
}
.MainMenuItem:hover { background: transparent url("Images/ServiceMenuBG.png") repeat-x 0 -42px; }
.SubMenu {
z-index: 500;
display: none;
width: 150px !important;
position: absolute;
top: 10px;
left: 0;
background-color: rgb(51,118,184);
}
.SubMenu li { padding: 0 0 2px 5px; height: 20px !important; width: 143px; }
.SubMenu li a {
height: 20px !important;
font-weight: normal;
color: #ffffff;
text-align: left;
text-decoration: none;
}
.SubMenu li a:hover { text-decoration: underline; }
.MainMenu li.MainMenuItem>ul { top: auto; left: auto; }
.MainMenu li.MainMenuItem:hover ul { display: block; }'
Here's the HTML:
<div class="MainMenu">
<ul>
<li class="MainMenuItem" id="First">Home</li>
<li class="MainMenuItem">Philosophies</li>
<li class="MainMenuItem">Services
<ul class="SubMenu">
<li id="TopItem">Shop Repair</li>
<li>Donations</li>
<li>Consulting</li>
<li id="BottomItem">On-site Service</li>
</ul>
</li>
<li class="MainMenuItem">Contracts</li>
<li class="MainMenuItem">About Us</li>
<li class="MainMenuItem">Contact Us</li>
</ul>
</div>
The SubMenu doesn't display either on mouseover or if I set it's initial display property to block. It's as if it doesn't exist on the page at all.
Thanks in advance for any help.
.MainMenu { overflow: hidden; }
is hiding the sub menus, so remove that line. Line 6 in your CSS.
As Sotiris mentioned
.MainMenuItem a { color: #ffffff; }
hides the top menu items (maybe not on your version because I see you have a background image)