Slide down vertical menu without pushing horizontal from submenus - javascript

I have a menu list that is floated left for the main headings:
When a menu item with a submenu has a hover state, the submenu drops down, but pushes the menu to the right if it is wider than the main heading (spacing between 'shop' and 'about' -- as expected I suppose):
I'm trying to get the submenu to maintain its height (to push down the content below it on the page), but not push the items to the right over based on its width.
Using position: absolute just ignores the height of the submenu when its open.
Hoping there is something I'm missing.
Thanks for your help!

Try setting the width of the submenu to be that of the parent menu and then setting:
text-overflow: inherit;
overflow: visible;
On the submenu

I would position the sub menu dynamically and set its position to absolute. You will have to get the menu buttons left position and height and then set the sub menus left and its top to the height of its parent. Don't forget to use offset() to get the left position in case the menu is embedded in another container on the page.

I think that pushing the content downward can be done (only?) via javascript. Here is the updated fiddle and its source:
JS:
$(document).ready(function(){
$("li.drop").hover(function(){
$(this).addClass("hover");
$('#nav').css('height', $(this).children('ul:first').height()+30+'px');
}, function(){
$(this).removeClass("hover");
$('#nav').css('height', '');
});
});
CSS:
#nav > li {
position:relative;
display:inline;
margin:0px 15px;
padding:0;
}
#nav > li ul {
display: none;
position:absolute;
top:100%;
left:0;
min-width:200px;
}
#nav > li.hover ul {
display: block;
}
#content {
height: 50px;
width: 100%;
background: grey;
}
#nav ul {
list-style-type: none;
padding:0;
}

Related

bootstrap "mega-dropdown" centering main menu nav items

I am trying to build a main menu navigation with a full width screen drop downs below it. I found an awesome example to build off of, but I cannot seem to figure out how center the main menu items themselves.
Here is what I have so far, See example here : http://codepen.io/ajmajma/pen/ALJbdk .
This works perfectly, however I need those main menu items (home, about, etc..) to be centered.
My first thought was to inline-block them, however this causes some screwy behaviour with the sub menu.
IF I add
.desktop-nav {
text-align: center
}
.menu {
display: inline-block
}
I get the desired centered effect, however the sub menu is confined the the small center size of the ul, and I need it to remain the full width of the page. See behavior here - http://codepen.io/ajmajma/pen/wzYPQm .
Any idea of how to fix this to get desired effect? Thanks!
You could add a text-align:center to the ul and add a display:inline-block to the li. Just remove the float:left from the li and you're good.
.menu > ul {
margin: 0 auto;
width: 100%;
list-style: none;
padding: 0;
position: relative;
box-sizing: border-box;
text-align:center;
}
.menu > ul > li {
display: inline-block;
padding: 5px;
margin: 0;
}
http://codepen.io/Founded1898/pen/amREJm
I have found the solution to this:
.desktop-nav {
margin-left: 50%;
}
.menu > ul > li > ul {
margin-left: -50%;
}
If you don't want to set the margin in the desktop, you have to create a something like .iWantThisMenuToCenter {margin-left: 50%}and assign it to the <nav> tag.

Responsive dropdown menu conflict

I have been fiddling around with a menu-experiment that is based on 'responsive-nav.js' and trying to add dropdowns to it. All would be fine, but for some reason I am not able to get the dropdowns to appear right. Even with making them to absolute position within a relative container. I am sure it is something simple, but just can't get my head around it.
If I delete the script bit at the bottom it works but this way I loose the toggle-menu.
I created a lint for this:
https://dl.dropboxusercontent.com/u/5791486/dropdown2/index.html
The answer is as suggested below: overflow:visible, but to make the toggle fluid I had to create an extra media queries for this:
.js #nav {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: visible;
zoom: 1;
}
#media screen and (max-width: 40em) {
.js #nav {
overflow: hidden;
}
}
That was it, Thanks again!!!!
Tou have to set top: 100%; on #nav ul li:hover ul to let the submenu align to the bottom of their parent.
#nav ul li:hover ul {
display: block;
position:absolute;
top:100%;
}
Example: http://jsfiddle.net/UG9cy/

html - css block Width/Height

I have the following CSS code:
#nav {}
#nav a {
position: relative;
display: inline-block;
color: #F0F0F0;
width: 1em;
height: 2em;
line-height: 0.9em;
}
#nav a.icon:before { padding-right: 0;}
<nav id="nav">
<span>Home</span>
</nav>
But if the text is longer than 10 characters, it is automatically making a paragraph, making the text out of the original box. How can I prevent this?
Edit
All i want the background box in the screenshot to get bigger in width as the text is longer
http://prntscr.com/2cd973
if your aim is to display it all on the same line, you just need to remove width:1em; from #nav a
if you want to hide the text that is overflowing add overflow:hidden; to #nav a
if you want the a tag to adapt height and width to its content remove width:1em; and height:2em; from #nav a
You can display your content as a table-row. Then your links will be displayed as new columns in a table.
#nav {
display: table-row;
}
You can see the results on this fiddle.
Add this in #nav :
word-wrap:break-word;

Position sub menus under relative parent menus

I have a menu in a horizontal list and vertical submenus below. I have a simple JQuery script that shows the child <ul> when a parent is hovered over:
$('#menulist li').hover(
function() {
$(this).children('ul').stop().fadeIn(200);
},
function () {
$(this).children('ul').stop().fadeOut(200);
}
);
My issue is that the child ul do not position themselves under their respective parent list items.
Short of hard coding a margin-left for each child UL, does anyone know a way to get around this?
Recreation of issue here: http://jsfiddle.net/MeltingDog/S8smw/5/
CSS:
#menulist ul li {
display: inline;
list-style-type: none;
padding-right: 10px;
}
#menulist ul li ul{
display:none;
background-color:#FFF;
padding: 10px;
position: absolute;
z-index: 100;
}
Add position:relative to the parent li, as follows, also give some offset to the child ul:
#menulist ul li {position:relative;}
#menulist ul li ul{top:30px;left:0;}

Entire drop-down menu quickly flashes upon page load

I have a standard drop-down menu that uses jQuery to hide the children li elements. However, upon loading the site, the child elements quickly appear and subsequently disappear (sort of like a quick flash). I don't think this is at all related to the flash-of-unstyled-content known issue.
The site is in Hebrew, but that shouldn't affect anything. The site is located here
If you'd like a sample HTML + CSS and the Javascript code, I would gladly post it here.
I was just wondering if anyone has encountered this issue before. I'm seeing it in Chrome, and I haven't really checked if it also happens in IE and Firefox.
Thanks!
EDIT: HTML/CSS/JS shown below:
HTML:
<ul class="menu">
<li>blah
<ul class="sub-menu">
<li>blah</li>
</ul>
</li>
</ul>
CSS:
/* NAVIGATION -- level 1 */
ul.menu { float: right; list-style-type: none; font-size: 15px; margin-top: 50px; }
ul.menu > li{ float: right; display: inline; position: relative; margin-left: 30px; }
ul.menu li > a { display: block; color: #5c5d5f; text-decoration: none; border-bottom: solid 1px #9b9a95; }
ul.menu li:hover > a, ul.menu li a:hover , ul.menu li.current_page_item > a { color: black; }
body.home .current_page_item > a { }
body.home .current_page_item > a:hover { }
/* NAVIGATION -- level 2 */
ul.menu li > div { display: none; width: 157px; height: 171px; margin-right: -10px; position: absolute; opacity:0; background: url(images/subNav_bg.png) no-repeat top right; }
ul.menu li > div span { height: 15px; background: transparent; display: block; } /* used to push down the menu */
JS:
// navigation menu //
// add hasSubMenu to each li that has one //
$('.menu > li').has('ul').addClass('hasSubMenu');
// wrap with <div> //
$('li.hasSubMenu > ul').wrap('<div />');
$('ul.menu li > div').css('display', 'none');
$('ul.menu li > div').prepend('<span></span>');
$('li.hasSubMenu > a').click(function () {
return false;
});
// add class to <div> for extendedBg //
$('li.extendedBg').find('div').addClass('subBg2');
$('li.hasSubMenu').hover(function () {
// hover on
$(this).addClass('hover').find('div').stop().fadeTo("medium", 1, /* when done fading */
function () {
$(this).find('div').css('display', 'block');
//$(this).find('ul').css('display','block');
}
);
}, function () {
// hover off
$(this).removeClass('hover').find('div').stop().fadeOut();
});
Set the dropdown menu as display: none in the page's CSS or directly in the element itself using style="display:none". This will hide it as the page loads.
I have the same issue :( except when i used the css to hide it on load, i now have the problem that it never displays! even when hovering over the parent...
Even before i posted my reply i thought id try one more thing
#navigation ul ul{
display:none;
}
instead of
#navigation ul ul li{
display:none;
}
and now it works perfectly
I recommend setting the style to display:none the the li elements in a style sheet, so that the browser knows to render them initially as not displayed. Then, when jQuery loads, the inline style that jQuery adds will override the display style.
ul li {
display:none;
}
Try:
.mobile-menu:not( .mm-menu ) {
display: none;
}
where '.mobile-menu' is whatever class or ID you have given to the containing element of your menu.
e.g
<div class="mobile-menu">
<ul>
<li>about</li>
<li>Food</li>
</ul>
</div>

Categories