We Keep Coding

hover over text to show some other text

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

How to change this click menu to hover menu?

i want change this menu clickable to hover. When i do this doesen't work :/
I must add more text but question is simple for who known javascript well.
Sorry for my bad language.
I must add more text but question is simple for who known javascript well.
Sorry for my bad language.
I must add more text but question is simple for who known javascript well.
Sorry for my bad language.
(function($, undefined)
{
var open = [];
var opts = {
selector: '.dropdown',
toggle: 'dropdown-toggle',
open: 'dropdown-open',
nest: true
};
$(document).on('click.dropdown touchstart.dropdown', function(e)
{
// Close the last open dropdown if click is from outside the target dropdown
if ( open.length && ( ! opts.nest || ! open[ open.length - 1 ].find( e.target ).length ) )
{
open.pop().removeClass( opts.open );
}
var $this = $(e.target);
// If target is a dropdown then toggle it...
if ( $this.hasClass( opts.toggle ) )
{
e.preventDefault();
$this = $this.closest( opts.selector );
if ( ! $this.hasClass( opts.open ) )
{
open.push( $this.addClass( opts.open ) );
}
else
{
open.pop().removeClass( opts.open );
}
}
});
})(jQuery);
.Row
{
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column
{
display: table-cell;
background-color: red;
}
.dropdown {
position:relative;
min-width:100%;
background:#ccc;
display: inline-block;
}
.dropdown a {
display:block;
text-decoration:none;
color:#333;
}
/* toggle */
.dropdown .dropdown-toggle {
padding:0;
}
/* dropdown */
.dropdown-menu {
position:absolute;
top:100%;
right:0;
left:0;
display:none;
margin:0;
padding:0;
list-style-type:none;
background:#ccc;
}
/* options */
.dropdown-menu .option a {
}
.dropdown-menu .option a:hover {
background-color:#aaa;
}
/* open */
.dropdown-open {
z-index:400;
}
.dropdown-open > .dropdown-menu {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Row">
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
</div>

Change $(document).on('click.dropdown touchstart.dropdown', function(e) to $(document).on( 'mouseenter touchstart','.dropdown', function(e) {
demo
(function($, undefined) {
var open = [];
var opts = {
selector: '.dropdown',
toggle: 'dropdown-toggle',
open: 'dropdown-open',
nest: true
};
$(document).on( 'mouseenter touchstart','.dropdown', function(e) {
// Close the last open dropdown if click is from outside the target dropdown
if (open.length && (!opts.nest || !open[open.length - 1].find(e.target).length)) {
open.pop().removeClass(opts.open);
}
var $this = $(e.target);
// If target is a dropdown then toggle it...
if ($this.hasClass(opts.toggle)) {
e.preventDefault();
$this = $this.closest(opts.selector);
if (!$this.hasClass(opts.open)) {
open.push($this.addClass(opts.open));
} else {
open.pop().removeClass(opts.open);
}
}
});
})(jQuery);
.Row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column {
display: table-cell;
background-color: red;
}
.dropdown {
position: relative;
min-width: 100%;
background: #ccc;
display: inline-block;
}
.dropdown a {
display: block;
text-decoration: none;
color: #333;
}
/* toggle */
.dropdown .dropdown-toggle {
padding: 0;
}
/* dropdown */
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
margin: 0;
padding: 0;
list-style-type: none;
background: #ccc;
}
/* options */
.dropdown-menu .option a {}
.dropdown-menu .option a:hover {
background-color: #aaa;
}
/* open */
.dropdown-open {
z-index: 400;
}
.dropdown-open>.dropdown-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Row">
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
</div>

Using css:
.dropdown:hover > ul{
display:block;
}

I tried to understand and optimize your code.
As I can't understand the necessity of the "open" variable,
I removed it and created a working snippet that achieves what you want:
(Check the comments in my snippet for more details)
(function($, undefined) {
// var open = []; // I removed that, but it could be added back
var opts = {
selector: '.dropdown',
toggle: 'dropdown-toggle',
open: 'dropdown-open',
nest: true
};
// TAKIT: Changed with below
// $(document).on('click.dropdown touchstart.dropdown', function(e) {
$('.dropdown').on('mouseenter touchstart', function(e) {
/* TAKIT: Replaced some code here */
$('.dropdown-open').removeClass(opts.open);
// If target is a dropdown then toggle it...
var $this = $(e.target);
if ($this.hasClass(opts.toggle)) {
e.preventDefault();
$this = $this.closest(opts.selector);
if (!$this.hasClass(opts.open)) {
$this.addClass(opts.open);
}
}
});
// TAKIT: Added the below
$('.dropdown').on('mouseleave touchend', function(e) {
// Close all the dropdowns
$('.dropdown-open').removeClass(opts.open);
});
})(jQuery);
.Row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column {
display: table-cell;
background-color: red;
}
.dropdown {
position: relative;
min-width: 100%;
background: #ccc;
display: inline-block;
}
.dropdown a {
display: block;
text-decoration: none;
color: #333;
}
/* toggle */
.dropdown .dropdown-toggle {
padding: 0;
}
/* dropdown */
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
margin: 0;
padding: 0;
list-style-type: none;
background: #ccc;
}
/* options */
.dropdown-menu .option a {}
.dropdown-menu .option a:hover {
background-color: #aaa;
}
/* open */
.dropdown-open {
z-index: 400;
}
.dropdown-open>.dropdown-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Row">
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
English
<ul class="dropdown-menu">
<li class="option">French</li>
<li class="option">German</li>
<li class="option">Arabic</li>
<li class="option">Chinese</li>
</ul>
</div>
</div>
</div>
Feel free to comment if any.
Hope it helps.

Transitions doesn't work

I was trying to add a search bar that extends itself on subscribe button, and I can't delay the button's display value with JQuery click event. If I use another hover function in js, it ignores click event, and transitionsdoesn't work as well.
It is my first post,so, I'm sorry if I made any mistake.
Here is my code:
HTML:
<nav class="navbar navbar-inverse affix-top container" id="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="file:///C:/Users/Eren/Desktop/HTML-CSS/Project-BlackKnight/Project-BlackKnight.html?">Black Knight</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-xs">
<div class="container-2">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
<li class="subs"><a data-toggle="modal" data-target="#subscribe" href="#"><span class="glyphicon glyphicon-user"></span> Subscribe</a></li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar { border: none; box-shadow: none; }
.navbar.affix {
position: fixed;
top: 0;
z-index:10;
}
.container-2 {
width: 200px;
vertical-align: middle;
white-space: nowrap;
position: relative;
}
.container-2 input#search {
width: 50px;
height: 50px;
background: #2b303b;
border: none;
font-size: 10pt;
float: left;
color: #262626;
padding-left: 45px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
-webkit-transition: width .70s ease;
-moz-transition: width .70s ease;
-ms-transition: width .70s ease;
-o-transition: width .70s ease;
transition: width .70s ease;
}
.container-2 input#search::-webkit-input-placeholder { color: #65737e; }
.container-2 input#search:-moz-placeholder { color: #65737e; }
.container-2 input#search::-moz-placeholder { color: #65737e; }
.container-2 input#search:-ms-input-placeholder { color: #65737e; }
.container-2 .icon {
position: absolute;
top: 50%;
margin-left: 17px;
margin-top: 17px;
z-index: 1;
color: #4f5b66;
}
.container-2 input#search:focus, .container-2 input#search:active { outline:none; width: 200px; }
.container-2:hover+.subs{ display: none; }
\#search { position: absolute; }
.subs { margin-left: 45px; transition: 5s all 5s ease; } //this is the problem
.container-2:hover input#search { width: 200px; }
.container-2:hover .icon { color: #93a2ad; }
js:
$('.navbar').affix ( {
offset: {
top: function () {
return (this.bottom = $('.top-images').height());
}
}
});
$('#search').click(
function() {
$('.subs').hide();
}
);
$(document).click(
function(e){
if (!$(e.target).is('#search')) {
setTimeout(function() {
$('.subs').show();
}, 500);
}
if (!$(e.target).is('#search')) {
$('.modal').modal(toggle)
}
if ($(e.target).is('.sub-button')) {
$('.modal').modal(toggle)
}
}
);
If you have any more effective ideas, I'm open for suggestions.
Thank you in advance!
Here is a fiddle with my code: fiddle link

You can use delay when you show/hide an element. For example, on you case, change this JQuery code:
if (!$(e.target).is('#search')) {
setTimeout(function() {
$('.subs').show();
}, 500);
}
to:
if (!$(e.target).is('#search')) {
setTimeout(function() {
$('.subs').delay(1000).fadeIn();
}, 100);
}
And remove margin in your li:
.navbar-nav>li {
margin: 0;
}
Finally, here is a fiddle: fiddle link
You can make with hover event too. I made another fiddle with hover:
hover function
Hope this is what you've been looking for!

I don't know what you want to make exactly but check thi jsfiddle
I have fixed that data-target='#subscribe' to data-target='#search'
Check it and let me know what else do you want to get

display a div on hover of an item such that items inside div should be clickable

$().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/

Using CSS for displaying hidden item

I have simple html code like this jsfiddle file which display an <a> tag named Test. What I am going to do is when I click to this tag Test, a new div with the class name surveySummaryMenu which including 2 other <a> tag named v1 Test and v2 Testshould be displayed. I do this by using CSS:
.surveySummaryList> .active >.surveySummaryMenu {
display: inherit;
}
but i seems not working. Can anyone have an idea?

You could do something like this:
JS:
<script>
function menuButton() {
document.getElementById("menu").style.display = 'block';
}
</script>
HTML:
<div class="row" >
<ul class=" nav surveySummaryList">
<li>
<a href="javascript:" onclick="menuButton();">
<span>Test</span>
</a>
<div class="surveySummaryMenu" id="menu">
<ul class="nav navbar">
<li>
<a href="javascript:">
<i></i> v.<span>2</span>
<span>
<span>Test</span>
</span>
</a>
</li>
<li>
<a href="javascript:">
<i></i> v.<span>1</span>
<span>
<span>Test</span>
</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
CSS:
.surveySummaryList .surveySummaryList {
margin-left: 10px;
}
.surveySummaryList>.active {
padding-left: 6px;
background-color: #EEEEEE;
}
.surveySummaryList .surveySummaryMenu a {
color: white;
}
.surveySummaryList .surveySummaryMenu a:active,
.surveySummaryList .surveySummaryMenu a:visited {
background: rgba(0, 0, 0, 0.8);
}
.surveySummaryList>li .surveySummaryMenu {
background: rgba(0, 0, 0, 0.6);
position: absolute;
left: 100%;
top: 0;
display: none;
color: white;
width: 100%;
min-width: 200px;
z-index: 1001;
}
.surveySummaryList> .active >.surveySummaryMenu {
display: inherit;
}