Example:
I am in the "Contact" page. I want the "Contact" menu item to be at 100% opacity and the rest at 30% opacity.
I am in the "About" page. I want the "About" menu item to be at 100% opacity and the rest at 30% opacity.
My menu is this:
HTML:
<ul class="menu">
<li class="menu-item menu-item-1">Home</li>
<li class="menu-item menu-item-2 current-menu-item">Contact</li>
<li class="menu-item menu-item-3">About</li>
</ul>
CSS:
.menu .menu-item-1 {background: url('images/image1.jpg');}
.menu .menu-item-1 a {background: url('images/transparent-black-border-1.png') no-repeat; background-position: bottom;}
.menu .menu-item-2 {background: url('images/image2.jpg');}
.menu .menu-item-2 a {background: url('images/transparent-black-border-2.png') no-repeat; background-position: bottom;}
.menu .menu-item-3 {background: url('images/image3.jpg');}
.menu .menu-item-3 a {background: url('images/transparent-black-border-3.png') no-repeat; background-position: bottom;}
What I want:
When the .current-menu-item class appears, that menu item should be at 100 opacity and the others at 30%. Also the .menu .menu-item-1 background image should fade too, not only the a-tag.
Can you help me?
You can use the not() function..
JSFiddle
JS:
$(".menu-item").on('mouseenter', function(){
$(".menu-item").find('a').not($(this).find('a')).css('opacity','0.3')
}).on('mouseleave', function(){
$(".menu-item").find('a').css('opacity','1');
});
HTML:
<ul class="menu">
<li class="menu-item">Some text</li>
<li class="menu-item">Some text</li>
<li class="menu-item">Some text</li>
</ul>
Note: Having an anchor-tag inside an ul is a bad practice. There should be only li-tags inside an ul. Therefor I put the a-tag inside each list.
E: After your update you say you want to have the current page on opacity 1 all the time and the rest on 0.3. On hover you want the hovered li element to go on 1 as well.
Updated Fiddle
In your HTML markup you set the class active at each page for the desired menu-item. Give that class an opacity of 1 and the rest of the menu items an opacity of 0.3. On hover do not touch the active class but the others.
HTML:
<ul class="menu">
<li class="menu-item active">Home</li>
<li class="menu-item">Page1</li>
<li class="menu-item">Page2</li>
</ul>
CSS:
.menu-item {
opacity: 0.3;
}
.active {
opacity: 1;
}
JS:
$(".menu-item").on('mouseenter', function(){
$(this).not('.active').css('opacity','1')
}).on('mouseleave', function(){
$(this).not('.active').css('opacity','0.3');
});
To change the opacity you can do something like this:
$(".menu-item").hover(function(){
$(".menu-item").each(function(){
$(this).css("opacity", 0.8);
})
$(this).css("opacity", 1);
});
For easier selector, it would be better to change your HTML structure into this:
<ul class="menu">
<li class="menu-item menu-item-1">...</li> Some text
<li class="menu-item menu-item-2">...</li> Some text
<li class="menu-item menu-item-3">...</li> Some text
</ul>
For changing the image into B&W/grayscale you need to use HTML5 Canvas, and use this jQuery.BlackAndWhite..
Related
When I open a child div on hover with Javascript it works, also when I hover over the next parent div that child div opens but when I go back to the first parent the second one stays open (on top) and doesn't fade-out.
What I would like is that the other child div('s) close when hovering to a new one. Maybe good to know is that I only want the other child div(s) to close when hovering to a new parent with a child div not when im just hovering out of the current parent.
Does anyone know the trick?
$('li.menu-item-has-children').hover(function () {
$('ul.dropdown-menu-main', this).fadeIn('slow');
});
ul, ul li {
list-style:none;
padding:0;
margin:0;
}
li {
display: inline-block;
position: relative;
margin-right:20px !important;
}
ul.dropdown-menu-main {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
background:black;
z-index:-1;
padding:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>
I found the solution when 'parent()' and 'children()' are not 'this'.
$('li.menu-item-has-children').hover(function () {
$('ul.dropdown-menu-main', this).fadeIn('slow');
$(this).parent().children().not(this).find('ul.dropdown-menu-main').fadeOut('fast');
});
ul, ul li {
list-style:none;
padding:0;
margin:0;
}
li {
display: inline-block;
position: relative;
margin-right:20px !important;
}
ul.dropdown-menu-main {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
background:black;
z-index:-1;
padding:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>
Sorry have just re-read your question and realised you wanted the menu to stay active. I've created a demonstration which does this by adding an .active class and toggling the submenus are you initially wanted using fadeIn and fadeOut. This will also allow you to attribute css styles to the dropdown if you would rather use that rather than jquery.
// Toggle function on hover, ignore if already active
$(".menu-item-has-children:not('.active')").hover( function() {
// Remove active class from all menus
$(".menu-item-has-children.active").toggleClass();
// Add toggle class to this menu
$(this).toggleClass("active");
// Fade out existing dropdown menus
$(".dropdown-menu-main").fadeOut('slow');
// Fade in this child dropdown menu
$(this).find(".dropdown-menu-main").fadeIn('slow');
});
The second example I will leave up for others, it shows how to do a more traditional dropdown where it fades out once the hover leaves the parent. You can use the exit function as well as the entry function of hover, the first function you provide is ran on mouseenter and the second on mouseleave.
Jquery .hover()
EXAMPLE WITH PERSISTENT DROPDOWNS
// Toggle function on hover, ignore if already active
$(".menu-item-has-children:not('.active')").hover( function() {
// Remove active class from all menus
$(".menu-item-has-children.active").toggleClass();
// Add toggle class to this menu
$(this).toggleClass("active");
// Fade out existing dropdown menus
$(".dropdown-menu-main").fadeOut('slow');
// Fade in this child dropdown menu
$(this).find(".dropdown-menu-main").fadeIn('slow');
});
ul, ul li {
list-style:none;
padding:0;
margin:0;
}
li {
display: inline-block;
position: relative;
margin-right:20px !important;
}
ul.dropdown-menu-main {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
background:black;
z-index:-1;
padding:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>
EXAMPLE WITH TRADITIONAL DROPDOWNS
These collapse when the hovering over the parent ends.
// Hover function
$('li.menu-item-has-children').hover(
// Hover in function
function() {
$('ul.dropdown-menu-main', this).fadeIn('slow');
},
// Hover exit function
function() {
$('ul.dropdown-menu-main', this).fadeOut('slow');
}
);
ul,
ul li {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
position: relative;
margin-right: 20px !important;
}
ul.dropdown-menu-main {
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
background: black;
z-index: -1;
padding: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>
i'm doing a project in which I have to make a website from scratch using no frameworks. The problem i'm having is that I'd like to make a navigation bar that can collapse down on mobile devices aswell as have a dropdown menu on a desktop.
I've managed to get it properly working for mobile devices, but when on a desktop the dropdown menus just hide within the nav bar container. I believe this is a problem where the height isn't adjusting for the dropdown, but i'm not too sure how i'd fix it. The navigation bar has to be fixed to the top, collapse when below 900px and the dropdowns must be visible when hovering over them.
The Website in question is
http://www.ico.mmu.ac.uk/13143651/webdev/
CSS
nav {
background-color: #b8b8b8;
font-family: arial;
position: fixed;
top: 0;
z-index:999;
text-decoration: none;
width: 100%;
padding:0px;
overflow:auto;
margin:0px;
clear:both;
}
HTML
<nav role="navigation">
<ul class="slimmenu" id="navigation">
<li>
Courses
<ul>
<li>Digital Media</li>
<li>Web Development</li>
<li>Journalism</li>
<li>Information Communications</li>
</ul>
</li>
<li>
Facilities
<ul>
<li>Societies</li>
<li>Jobs and Placements</li>
<li>Library</li>
</ul>
</li>
<li>
Manchester and Student Life
<ul>
<li>Travel</li>
<li>Attractions</li>
<li>Nightlife</li>
</ul>
</li>
<li>
Student Help
<ul>
<li>Finance</li>
<li>Student Union</li>
<li>Assistance</li>
</ul>
</li>
<li>Contact</li>
</nav>
Thanks in advance.
In your css, change your .nav overflow rule.
From
overflow: auto
to
overflow: visible
It's hard to know what the desired behaviour is, but you can try variations on this:
ul.slimmenu li > ul{
position: fixed;
top: 50px;
left: none;
}
I am trying to implement a drop down menu in a HTML page using CSS and jquery. Here is a sample of the HTML and javascript code.
<nav id="topNav">
<ul>
<li>Menu 1</li>
<li>
Menu 2
<ul>
<li>Sub Nav Link 1</li>
<li>Sub Nav Link 2</li>
<li>Sub Nav Link 3</li>
<li>Sub Nav Link 4</li>
<li class="last">Sub Nav Link 5</li>
</ul>
</li>
<li>
Menu 3
</li>
</ul>
</nav>
Here is the Javascript code:
var nav = $("#topNav");
//add indicators and hovers to submenu parents
nav.find("li").each(function() {
if ($(this).find("ul").length > 0) {
$("<span>").text("^").appendTo($(this).children(":first"));
//show subnav on hover
$(this).click(function() {
$(this).find("ul").stop(true, true).slideToggle();
});
}
});
I will be adding content to menu programmatically, and I want the dropdown menus to be scrollable when the content of the dropdown menu gets too large.
How can I do this?
Try this using css like,
#topNav ul li ul{
max-height:250px;/* you can change as you need it */
overflow:auto;/* to get scroll */
}
Demo
There is a css property max-height you can use it:
#topNav ul ul{
max-height:150px; // you choice of number in pixels
overflow-x:hidden; // hides the horizontal scroll
overflow-y:auto; // enables the vertical scroll
}
Why not use a purely CSS solution?
FIDDLE
You can change the transition property to have the style of animation for the slide you prefer, and the max-height value to limit the size of the dropdown before scrolling occurs.
HTML
<ul id='menu'>
<li>item</li>
<li>item</li>
<li>dropdown
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
CSS
body, html {
width:100%;
}
ul {
list-style:none;
margin:0;
padding:0
}
#menu > li {
display:inline-block;
border:1px solid grey;
position:relative;
}
#menu li ul {
position:absolute;
border:1px solid grey;
width:100%;
max-height:0;
overflow:hidden;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
#menu li:hover ul {
overflow:auto;
max-height:50px;
}
use CSS style:
#topNav{
overflow:scroll;
}
Isn't it possible to set a height and then overflow: auto, as CSS a property? and the scroll will automatically appear?
I have a menu and a submenu. I got it toggled in Jquery by combining some answers from stackoverflow and from api.jQuery. But now I am really stuck and I cant find a way out to solve it.
Whenever I reach the menu, submenu toggles(Good thing), but whenever I reach for the submenu links it disappears.
And it doesnot work in fiddle because of the styling, thats why I didnt put it there.
HTML
<ul id="menüü">
<li class="menu">
<p>Meist
</p>
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
<p>Seadmed
</p>
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
<div id="submenu"></div>
CSS
.menu {
display: inline;
float:left;
width:180px;
height:50px;
color:#191919;
text-align:center;
background:#990000;
-moz-border-radius-top-left: 50px;
border-top-left-radius: 50px;
position:relative;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:62px;
right:25%;
z-index:300
}
.submenu {
background-color:#cecece;
}
.submenu > li {
list-style-type:none;
background-color:#fff;
color:blue;
cursor:pointer;
}
#submenu {
color:white;
height:40px;
width:900px;
background:#630000;
margin-top:50px;
position:relative;
}
JS
$(document).ready(function () {
$("li.menu").mouseenter(function () {
$(this).find(".submenu").toggle();
});
});
Change mouseenter to mouseover then when you hover a child element it will not close. And use mouseover to show and mouseout to hide.
Example on jsFiddle
$(document).ready(function ()
{
$(".menu").mouseover(function ()
{
$(this).find(".submenu").show();
});
$(".menu").mouseout(function ()
{
$(this).find(".submenu").hide();
});
});
Toggling toggles between show and hide, so the first time the mouseenter event is triggered it will show and the second time it hides. You need to add a conditional statement to make sure it doesn't hide it if the mouse is over it. Better way to do it is to use mouseenter to show and mouseout to hide.
Not a perfect example by any means, but this pure css version should provide a good base to get you started?
http://jsfiddle.net/bNpnZ/2/
<ul class="menu">
<li> Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li> Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
ul {
margin:0;
list-style:none;
}
.menu {
width:100%;
float:left;
background:#eee;
}
.menu > li {
float:left;
margin:0 0 0 10px;
position:relative;
}
.menu > li:first-child {
margin:0;
}
.menu > li > a {
padding:10px 20px;
float:left;
color:#666;
}
.submenu {
position:absolute;
top:-9999em;
left:0;
font-size:14px;
background-color:#ccc;
}
.menu > li:hover .submenu {
top:30px;
}
I have update the jquery and added style for .menu a, also <p> in not required in side the li.
jQuery
$('.menu').hover(
function () {
$(this).children('.submenu').fadeIn('fast');
},
function () {
$(this).children('.submenu').fadeOut();
});
css
.menu a{
display:block;
line-height:50px;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:50px;
right:25%;
z-index:300
}
html
<ul id="menüü">
<li class="menu">
Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
jsFiddle File
I am trying to position an background image so it looks like this when hovered:
Example of what I want to achive:
I have this greenbox(.png) as image. That i want to have in the exact middle of the menbu.
My HTMl:
<div id="menu">
<ul>
<li>Some text</li>
<li>Some text 2</li>
<li>Some text 3</li>
</ul>
</div>
MY CSS:
/* MENU */
#menu {color:#FFFFFF;float: left;font-family: Arial,"Black";font-size: 18px;margin-top: 31px;width: 700px;}
#menu ul {list-style-type:none;}
#menu li {float: left;margin-left: 15px;}
I also want to only have the greenbox on active menu items and hovered menu items. Is there a smart way of doing that with Jquery or CSS?
If I understand you correctly, this will do it:
li:hover{background-image:url(greenbox.png); background-position:center center; background-repeat:no-repeat;}