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;}
Related
Short Summary:
Upon hovering over drop down list, I would like to also rotate the arrow that is next to the list item.
https://jsfiddle.net/v08gxczo/
Long summary:
I have a list of navbar items, in which it contains a dropdown that has a right-pointing svg.
Upon hovering the 'dropdown' item the color changes, and the dropdown stays upon as long as one is hovering. I would love to transform: rotate(xdeg) upon also hovering on and within this list, except I'm having a world of trouble trying to capture it. It looks a little something like this (snippit + fiddle):
ul {
display:flex;
list-style:none;
}
img {
padding-left:10px;
}
li {
margin: auto 20px;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5 s ease;
display: none;
background - color: #0c0c0c;
padding: 1em 0 0 1em;
border-radius: 5px;
}
ul li ul li {
padding: 0 0 0.5em 0;
}
ul li:hover>ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<ul>
<li><a>item 1</a></li>
<li><a>item 1</a></li>
<li><a>item 1</a><img src="https://image.flaticon.com/icons/svg/32/32213.svg" alt="right-arrow" style="height:10px"/>
<ul>
<li><a>child 1</a>
</li>
<li><a>child 1</a>
</li>
<li><a>child 1</a>
</li>
</ul>
</li>
</ul>
In specifics, the highlighting dropdown happens here:
ul li:hover>ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
and I'm not sure how I would incorporate the hover over to keep the item rotated at the same time there is a hover over.
I attempted with this:
ul li:hover>ul,
ul li ul:hover {
transform: rotate(10deg);
}
but reading that code, it only makes sense that it would rotate the list, I which it does.
The more I look at this the harder it is for me to understand how to do this in just CSS. Even in javascript, it seems like a pain (adding event listeners to the open list, and then hover over to add or remove the class when mouseout.
Perhaps there is a solution I can't see?
As I understand it, you want to make an effect for the image when you hover the list.
You can affect rotating the image when hovering like this instead of your attempt:
ul li:hover img {
transform: rotate(90deg);
}
It's a simple answer, since I don't know if this is exactly what you're trying to do. Please, let me know.
If possible try to add js fiddle because I cannot understand what is the result you are getting with your current code. All i can say with the code you have provided is if you want to rotate the image on li hover then give rotete property on that img i.e
{ transform: rotate(10deg);
}
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.
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;
}
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>
I am a student worker, I'm working off an idea, I have found an open source drop down menu that I would like to alter.
I would like to alter it so that instead of showing its children when it is hovered over, it shows them when clicked. Is this possible? Or does anyone know of a similar solution that is open source?
Here is the code:
Too many lines to post the HTML so here is the URL
http://notimefortime.com/index.txt
#menuh-container
{
position: absolute;
top: 1em;
left: 1em;
}
#menuh
{
font-size: 10px;
font-family: arial, helvetica, sans-serif;
width:100%;
float:left;
margin:2em;
margin-top: 1em;
}
#menuh a
{
text-align: center;
display:block;
border: 1px solid #0040FF;
white-space:nowrap;
margin:0;
padding: 0.3em;
}
#menuh a:link, #menuh a:visited, #menuh a:active
{
color: white;
background-color: #0040FF;
text-decoration:none;
}
#menuh a:hover
{
color: white;
background-color: #668CFF;
text-decoration:none;
}
#menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:20em;
}
#menuh li
{
position:relative;
min-height: 1px;
vertical-align: bottom;
}
#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}
#menuh ul ul ul
{
top:0;
left:100%;
}
div#menuh li:hover
{
cursor:pointer;
z-index:100;
}
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{
display:none;
}
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{
display:block;
}
No.
You're currently using the CSS :hover pseudo selector which displays the child when the parent is hovered over. There's a pseudo selector :active which is only triggered if you're holding down the mouse button on an element, but that's obviously not what you want.
For the menu to appear on click, you'll need JavaScript. However, in case a user is browsing with Javascript off, you'll want to revert to the CSS hover technique. So, start with some basic HTML/CSS, similar to what you have:
HTML:
<ul id="menu">
<li>
Some Link
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
<li>
Some Link 2
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
CSS:
#menu li ul {
display:none;
}
#menu li:hover ul {
display:block;
}
Then, in JavaScript, override the hover event and keep the children hidden. Also, attach a click event and show the child on that:
Javascript:
window.onload = function() {
var menu = document.getElementById("menu"), //get the menu
i = 0;
//get the <li>s
var parents = menu.children;
for(i=0;i<parents.length;i++) {
//override the hover event
parents[i].onmouseover = function() {
//hide the first child (which, in this specific case,
//is the <ul> that we're looking for)
//if you want to hide more children, you could
//loop through and hide them all, etc.
this.children[0].style.display = "none";
};
//on click,
parents[i].onclick = function() {
//show the first child if it's hidden
//hide if it's visible
var c = this.children[0];
c.style.display = c.style.display === "none" ? "block" : "none";
};
}
};
You can see an example here: http://jsbin.com/ifuvuw/2/edit
Please note:
This does not handle the nested menus you have. It's a simple example. You can take the basic principle and apply it to your case. If you have any questions on how it works, please ask, but if you're having trouble applying it, consider asking a new question.
TL;DR: You can't do it with CSS, but you can with Javascript
Pros: please tweak my (probably crappy) JS and improve it
Noobs: please ask if you don't understand how it works
The best way to accomplish this would be to use JavaScript. I'd recommend using the jQuery framework, it makes it a lot easier. Here is a good starting point:
http://api.jquery.com/click/