I'm having a hardtime to find out how to make a hover effect to show some other text/buttons. i want to make a sort of nav menu with hovers.
please see the picture for more information;
when you hover to "platenwarmtewisselaar" i want to make a drop down menu over the picture. and when you go to "buizenwarmtewisselaar"or the other text/buttons there will a couple of other options to chose from. how can i insert this into my code?
many thanks!
My code;
<div id="knoppen">
<div id="Plaat" onclick="URL" onmouseover="ShowP()">
<button id="plaatknop">Platenwarmtewisselaar </button>
</div>
<div id="buis">
<button id="buisknop" onclick="URL"onmouseover="ShowB()">Buizenwarmtewisselaar</button>
</div>
<div id="productenplaat">
<div id="gelast">
<button id="gelastknop">Gelasteplatenwisselaar </button>
</div>
<div id="gesoldeerdplaat">
<button id="gesoldeerdknop">gesoldeerde platenwisselaar</button>
</div>
<div id="pakkingenplaat">
<button id="pakkingenknop">platenwisselaar met pakkingen</button>
</div>
</div>
You can use like below code
#menu {
width: 150px;
height: 100%;
background: #424242;
color: white;
float: left;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style: none;
font-size: 20px;
padding: 15px 20px;
cursor: pointer;
}
#menu li:hover {
background-color: #90CAF9;
}
#menu li.active {
background-color: #2196F3;
}
#menu ul li ul {
display: none;
}
#menu ul li.submenu {
position: relative
}
#menu ul li.submenu ul {
position: absolute;
left: 150px;
width: 200px;
top: 0;
background: #333
}
#menu ul li.submenu:hover ul {
display: inline-block
}
<div id="menu">
<ul>
<li onClick="Dashboard();">Platenwarmtewisselaar </li>
<li class="submenu">Buizenwarmtewisselaar >
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Gelasteplatenwisselaar </li>
<li class="submenu">Salary
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Change Password</li>
</ul>
</div>
I'm not sure, but are you talking about this dropdown menu? If so, you can follow the guidelines here.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover
Related
I'm currently in the middle of creating a responsive navigation. I've managed to finish and trying to fix an issue. Whenever I tried resizing the browser, it seems the toggleClass seems to be triggering multiple times. If refresh the browser it works OK, but after resizing it seems to trigger a couple of times in one click.
Here is the code that I have been working on.
JSFiddle - https://jsfiddle.net/kvpyzbxr/1/
<header>
<ul class="navigation secondary-navigation">
<li>
Schools
</li>
<li>
Faculty
</li>
<li>
Research
</li>
<li>
Contact Us
</li>
</ul>
<ul class="navigation primary-navigation">
<li>
Programs
<ul>
<li>Degree Programs</li>
<li>Master in Business Administration</li>
<li>Executive Master in Business Administration</li>
<li>Master in Entrepreneurship</li>
<li>Master of Science and Innovation and Business</li>
<li>Master in Development Management</li>
</ul>
</li>
<li>
Admissions
<ul>
<li>How to Apply</li>
<li>Application Form</li>
<li>Scholarship and Financial Aid</li>
</ul>
</li>
<li>
About Us
<ul>
<li>Why AIM</li>
<li>Leadership</li>
<li>Network and Alliances</li>
<li>Our Brand Story</li>
</ul>
</li>
<li>
News
</li>
<li>
Alumni
<ul>
<li>AIM Leader Magazine</li>
<li>My AIM Connect</li>
<li>Triple A Awardees</li>
</ul>
</li>
<li>
Give
<ul>
<li>Make A Gift</li>
</ul>
</li>
</ul>
</header>
<script>
$(document).ready(function() {
function detectMobile() {
if ($(window).width() < 1080) {
$('header').addClass('mobile');
$('.secondary-navigation').insertAfter('.primary-navigation');
}
else {
$('header').removeClass('mobile');
$('.secondary-navigation').insertBefore('.primary-navigation');
}
$('.navigation li').on('click', function() {
console.log('open');
$(this).toggleClass('expand-menu');
})
}
detectMobile();
$(window).resize(function() {
detectMobile();
})
})
</script>
header {
max-width: 1336px;
margin: 0 auto;
}
header .navigation {
padding: 10px 0;
clear: both;
}
header .navigation li {
padding: 10px;
display: inline-block;
position: relative;
font-family: 'Arial', sans-serif;
background-color: #272041;
color: #fff;
float: left;
}
header .navigation li a {
color: #fff;
}
header .navigation li ul {
position: absolute;
top: 0;
left: 0;
padding-top: 30px;
display: none;
}
header .navigation li ul li {
background-color: #231d39;
color: #95939e;
}
header .navigation li:hover ul {
display: block;
}
header.mobile .navigation li {
display: block;
float: none;
}
header.mobile .navigation li ul {
position: static;
display: none;
height: 0;
}
header.mobile .navigation li.expand-menu ul {
height: initial;
display: block;
}
That's because you add the click-event several times. Every time detectMobile() is called you bind a click event to $('.navigation li'). So just move
$('.navigation li').on('click', function() {
console.log('open');
$(this).toggleClass('expand-menu');
})
outside of your detectMobile() function.
I'm trying to make a new cool menu animation for my website. But i can't get the menu to animate smoothly.
When I click on a menu item, javascript set a remove all classes "selected" from menu items and add "selected" to menu item that is clicked.
The menu html
<div class="piranya-menu-wrapper responsive">
<ul id="piranya-menu-2" class="piranya-menu open">
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first" style="transition-delay: 0s;">Forside</li>
<li data-offset="1" aria-haspopup="true" class="piranya-menu-item-2 piranya-menu-item-intermediate parent selected" style="transition-delay: 0.05s;">
<img src="/Image/8239" alt="menuicon" class="piranya-menu-item-icon">Løsninger <i class="piranya-icon-text piranya-expander"></i>
<ul>
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first">Hjemmeside</li>
<li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-intermediate">Webshop</li>
<li data-offset="2" class="piranya-menu-item-3 piranya-menu-item-intermediate">Infoscreen</li>
<li data-offset="3" class="piranya-menu-item-4 piranya-menu-item-intermediate">SEO</li>
<li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate">Hosting og drift</li>
<li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-last">Special løsninger</li>
</ul>
</li>
<li data-offset="2" aria-haspopup="true" class="piranya-menu-item-3 piranya-menu-item-intermediate parent" style="transition-delay: 0.1s;">
<img src="/Image/8242" alt="menuicon" class="piranya-menu-item-icon">Platform <i class="piranya-icon-text piranya-expander"></i>
<ul>
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first">CMS</li>
<li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-intermediate">E-commerce</li>
<li data-offset="2" class="piranya-menu-item-3 piranya-menu-item-intermediate">Social Media</li>
<li data-offset="3" class="piranya-menu-item-4 piranya-menu-item-intermediate">Markedsføring</li>
<li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate">Infoscreen</li>
<li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-intermediate">Booking</li>
<li data-offset="6" class="piranya-menu-item-7 piranya-menu-item-intermediate">Apps</li>
<li data-offset="7" class="piranya-menu-item-8 piranya-menu-item-last">Integration</li>
</ul>
</li>
<li data-offset="3" aria-haspopup="true" class="piranya-menu-item-4 piranya-menu-item-intermediate parent" style="transition-delay: 0.15s;">
<img src="/Image/8245" alt="menuicon" class="piranya-menu-item-icon">Cases <i class="piranya-icon-text piranya-expander"></i>
<ul>
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first">Hjemmeside</li>
<li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-last">Infoscreen</li>
</ul>
</li>
<li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate" style="transition-delay: 0.2s;">
<img src="/Image/8247" alt="menuicon" class="piranya-menu-item-icon">Support
</li>
<li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-last" style="transition-delay: 0.25s;">
<img src="/Image/8246" alt="menuicon" class="piranya-menu-item-icon">Kontakt
</li>
<div class="close-btn"></div>
</ul>
</div>
The css for the menu
header .piranya-menu
{
display: flex;
width: 100%;
}
#piranya-menu-2 > .piranya-menu-item-first
{
display: none;
}
header .piranya-menu-wrapper.responsive > ul > li
{
padding: 0px 8px;
cursor: pointer;
transition: flex 1000ms ease;
}
header .piranya-menu-wrapper.responsive > ul > li > a
{
color: white;
clear: both;
width: 100%;
float: left;
font-size: .8em;
text-align: center;
}
header .piranya-menu-wrapper.responsive > ul > li.selected
{
flex: 1;
}
header .piranya-menu-wrapper.responsive > ul > li.selected > a
{
line-height: 60px;
clear: none;
width: auto;
font-size: 1em;
padding-right: 5px;
background-color: #00253b;
}
#piranya-menu-2 > li.selected > img
{
height: 32px;
padding: 14px 10px 14px 5px;
margin: 0;
background-color: #00253b;
float: left;
}
header .piranya-menu-wrapper.responsive > ul > li:not(.selected):hover
{
background-color: rgba(0, 37, 59, 0.5);
}
header .piranya-menu-wrapper.responsive > ul > li > img
{
height: 24px;
margin: 8px auto;
float: none;
display: block;
}
But it doesn't look correct. When a menu item is clicked, the text is on a new line and a split second later it's show correctly - Any ideas anyone?
You can see the site here
http://piranya.dk/velkommen
Best Regards
Alex Sleiborg
Do this to fix the animation:
body > div.main-wrapper > div > header > div.lower > div > div {
max-height: 60px
}
It will prevent the container from expanding to a larger size.
is this smoother yet? javascript doesn't involved yet. And i just removed the sub-menu to see the progress step by step.
header{
width:100%;
position:relative;}
.upper, .lower{
width:100%;
position:relative;
display:flex;
}
.upper{
background:#ccc;
padding:10px 0;
}
.upper img{
width:200px;}
.lower{
background:#000;}
.center{
width:80%;
color:#fff;
text-decoration:none;
align-self:center;
margin:0 auto;}
.center a{
text-decoration:none;
color:#fff;
transition: all 1s ease-in-out}
.lower ul{
list-style: none;
padding:0;
margin:0;
display:flex;
flex-direction:row;
}
.lower li{
height:54px;
width:36px;
margin:5px;
display:flex;
align-items:center;
display:flex;
flex-direction:column;
transition: all 1s ease-in-out
}
.lower img{
height:32px;
margin:2px;
transition: all 1s ease-in-out
}
.lower li:hover{
flex-direction:row;
transition:all 1s ease-in-out;
width:160px;
}
<header>
<div class="upper">
<div class="center">
<img src="http://piranya.dk/image/8254">
</div>
</div>
<div class="lower">
<div class="center">
<ul>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
</ul>
</div>
</div>
</header>
$().ready(function() {
// Case : 1
$("li.products").hover(function() {
$(this).parents(".cotnainer-fluid").next().toggleClass("show");
//$("#category-list").css("opacity","1 !important");
});
})
div.banner {
width: 100%;
height: 379px;
}
div.banner>.row {
padding: 0 35px;
}
/* .menu{
background: transparent;
opacity: 0.5;
} */
.menu {
margin-right: 0;
margin-left: 0;
}
#menu-items {
background: #121212;
opacity: 0.7;
}
#menu-items {
padding: 22px;
margin: 0 25px;
text-align: center;
border-radius: 0 0 4px 4px;
}
ul#menu-items li {
list-style: none;
display: inline;
color: #939598;
font: normal 12px/16px Gotham-Medium;
}
ul#menu-items li a {
padding-bottom: 20px;
}
ul#menu-items li>a:hover {
color: #fff;
border-bottom: 4px solid #76bd1c;
}
li.item {
padding: 25px;
}
li.search {
margin-left: 145px;
}
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
/*
margin-top: -380px;
*/
background-color: #f7f6f5;
position: relative;
top: -380px;
z-index: -1;
display: none;
}
.show {
display: block;
}
/* li.products:hover #category-list{
display: block;
} */
#category-list ul li {
list-style: none;
display: inline-block;
}
.category-menu {
padding-top: 80px;
}
.category-menu {
font: normal 12px/16px Gotham-Medium;
color: #603913;
}
#category-menu-items {
margin-top: 5px;
}
#category-menu-items li {
text-align: center;
}
.padding-left60 {
padding-left: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<srcipt src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<div class="cotnainer-fluid" style="margin-top: 40px;">
<div class="banner">
<div class="row menu">
<ul id="menu-items">
<li class="item">HOME
</li>
<li class="item">ABOUT US
</li>
<li class="item products dropdown">PRODUCTS
</li>
<li class="item">STORE
</li>
<li class="item">CONTACT
</li>
<li class="item">LOGIN
</li>
<li class="item search"><i class="search-icon-header" style="font-size: 16px;"></i>
</li>
<li class="item basket"><i class="glyphicon glyphicon-shopping-cart" style="font-size: 16px;"></i>
</li>
</ul>
</div>
<h1 class="page-title">Some Title</h1>
</div>
</div>
<!-- End Nav items -->
<div id="category-list">
<div class="row category-menu">
<ul id="category-menu-items">
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biopesticides.png" alt="">
</p>
<p>BIOPESTIDES</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-nutrients.png" alt="">
</p>
<p>NUTRIENTS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biofertilizers.png" alt="">
</p>
<p>BIOFERTILIZERS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-seeds.png" alt="">
</p>
<p>SEEDS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-garden_Acc.png" alt="">
</p>
<p>GARDEN ACCESSORIES</p>
</a>
</li>
</ul>
</div>
</div>
I have a list of items in navbar, now on hovering on one of the list items i want to display a hidden div which contains another list of items which should be clickable.
In the above code, When I hover on PRODUCTS link; a div shows up. Now, I want to click on items in this div!!!!
I guess I need to check for hasClass('show'), and if so then i should be able to hover and click on the div items.
Any suggestions or help on how to move forward with this?
Priority of ID selector is higher than class selector.
Ref.
//Make sure this style is overwrite the style of #category-list
#category-list.show{
display: block;
}
Replace the style with the below one and try and adjust the position using top of category list
<style>
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
background-color: #f7f6f5;
position: absolute;
/*top: -380px;*/
z-index: -1;
display: none;
}
#category-list ul li {
list-style: none;
display: inline-block;
}
.show {
display: block !important;
}
Did some work in that jsfiddle.
// Show sub-menu with jQuery
$("ul#menu-items li.products a, ul#menu-items li.products").hover(function(){
console.log("show sub menu");
$("#category-list").show();
});
// Hide sub-menu with jQuery
$("body *").not("#menu-items, li.products, li.products a, #category-list, #category-list *, #category-menu-items, div.categories").hover(function(){
console.log($(this)); // Log the elements that triggers hide of sub menu
$("#category-list").hide();
});
Don't know the pure CSS sub-menu technique yet.
https://jsfiddle.net/mantisse_fr/p1eupdo3/1/
I have this accordion menu but it only works on the first ul. How do I get it to work on all ul like this? If you could explain what I'm doing wrong so I know in the future that would be great.
Also, how do I get it so that the link toggles between two classes, right and down each time it is clicked? It also has the class turq-font on it. I want the right to be removed and replaced with down when the link is clicked and the menu is showing. Heres my code:
$(function() {
$("#show-menu").click(function() {
$("#sub-menu-acc").toggleClass("active-menu", 1000);
});
});
.active-menu {
display: block !important;
}
.admin-area ul li {
margin: 6px 0px;
}
.admin-right-menu ul li a {
color: black;
text-decoration: none;
}
.admin-area ul {
list-style: none;
margin-bottom: 20px;
}
.admin-area ul li ul {
display: none;
padding-left: 20px;
margin-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="admin-area">
<div class="admin-right-menu">
<ul>
<li>Stats >
<ul id="sub-menu-acc">
<li>Business Stats
</li>
<li>Affiliate stats
</li>
</ul>
</li>
<li>Reports >
<ul id="sub-menu-acc">
<li>Global
</li>
<li>Sales
</li>
<li>Sales trends
</li>
</ul>
</li>
</ul>
</div></div>
The issue is due to your use of repeated id attributes; they should be unique within a document. Convert your code to use classes instead.
Also note that you should use the this keyword to traverse the DOM to find the ul related to the clicked a element, and the addition of right down in a toggleClass() call. Try this:
$(function() {
$(".show-menu").click(function(e) {
e.preventDefault(); // stop the '#' of the clicked a appearing in the URL
$(this).toggleClass('right down').next(".sub-menu-acc").toggleClass("active-menu");
});
});
.active-menu {
display: block !important;
}
.admin-area ul li {
margin: 6px 0px;
}
.admin-right-menu ul li a {
color: black;
text-decoration: none;
}
.admin-area ul {
list-style: none;
margin-bottom: 20px;
}
.admin-area ul li ul {
display: none;
padding-left: 20px;
margin-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="admin-area">
<ul>
<li>
Stats >
<ul class="sub-menu-acc">
<li>
Business Stats
</li>
<li>
Affiliate stats
</li>
</ul>
</li>
<li>
Reports >
<ul class="sub-menu-acc">
<li>
Global
</li>
<li>
Sales
</li>
<li>
Sales trends
</li>
</ul>
</li>
</ul>
</div>
Currently on my site when I have too many links, the link falls down below the navigation. See my example: https://jsfiddle.net/cn6z13n1/
Is it possible instead to have a More Links list item at the far right which will have a dropdown populated with links?
.toolkit_nav {
background:#dfdfdf;
width:100%;
height:40px;
padding:0;
}
.toolkit_nav ul {
margin:0;
}
.toolkit_nav ul .page_item {
display:inline-block;
line-height:40px;
list-style-type:none;
margin:0px;
padding:0 20px;
}
.toolkit_nav ul .page_item:first-child {
margin-left:0;
padding-left:0;
}
.page_item:hover, .current_page_item {
background:grey;
}
.page_item a {
color:black;
font-size: 0.9em;
font-weight: 400;
text-decoration:none;
}
<nav class="toolkit_nav">
<div class="row">
<div class="medium-12 columns">
<ul>
<li class="page_item page-item-1035 current_page_item">Introduction</li>
<li class="page_item page-item-1039">Digital Landscapes</li>
<li class="page_item page-item-1039">Link 4</li>
<li class="page_item page-item-1039">Link 3</li>
<li class="page_item page-item-1039">Link 2</li>
<li class="page_item page-item-1039">Link 1</li>
<li class="page_item page-item-1039">Link 5</li>
</ul>
</div>
</div>
</nav>
You would need to do this in js i suggest something like this
get the width of the row (max width for nav)
loop through the li elements and sum up there width (+ remember to add the width of a "more" element here
when sum of width > width of nav element hide the elements
add js to your "more" button which shows the hidden elements
Following code is not tested but should give you an idea:
var maxWidth = $('#nav').width();
var moreWidth = $('#more').width(); // li "more" element
var sumWidth = moreWidth;
$('#nav li').each(function() {
sumWidth += $(this).width();
if(sumWidth > maxWidth) {
$(this).addClass('hide'); // add css for hide class
}
});
$('#more').on('click', function() {
$('#nav .hide').fadeIn(100);
// You will need more code here to place it correctly, maybe append the elements in an container
});
Here an example with your fiddle:
https://jsfiddle.net/cn6z13n1/3/
Note: this is just a rough draft, you might to calc paddings etc. to make this work rly good
Edit: updated example with $(window).resize() function
https://jsfiddle.net/cn6z13n1/6/
You'll need to change you HTML slightly but this will work.
.toolkit_nav {
background: #dfdfdf;
width: 100%;
height: 40px;
padding: 0;
}
.toolkit_nav ul {
margin: 0;
}
.toolkit_nav ul .page_item {
display: inline-block;
line-height: 40px;
list-style-type: none;
margin: 0px;
padding: 0 20px;
}
.toolkit_nav ul .page_item:first-child {
margin-left: 0;
padding-left: 0;
}
.page_item:hover,
.current_page_item {
background: grey;
}
.page_item a {
color: black;
font-size: 0.9em;
font-weight: 400;
text-decoration: none;
}
/* NEW STUFF */
.sub-nav,
.sub-nav li {
box-sizing: border-box;
}
.more {
position: relative;
}
.more>ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0
}
.more:hover>ul {
display: block;
}
.more>ul>li {
display: block;
width: 100%;
clear: both;
text-align: center;
}
.toolkit_nav ul.sub-nav .page_item:first-child {
padding: 0 20px;
}
<nav class="toolkit_nav">
<div class="row">
<div class="medium-12 columns">
<ul>
<li class="page_item page-item-1035 current_page_item">Introduction
</li>
<li class="page_item page-item-1039">Digital Landscapes
</li>
<li class="page_item page-item-1039">Link 4
</li>
<li class="page_item page-item-1039">Link 3
</li>
<li class="page_item page-item-1039">Link 2
</li>
<li class="page_item page-item-1039 more">More...
<ul class="sub-nav">
<li class="page_item page-item-1039">Link 1
</li>
<li class="page_item page-item-1039">Link 5
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>