In my web app I have a vertical CSS menu, to show it. My code works as expected, with one issue, when I mouse out on all a.menutoggle elements the last dropdown remains open.
I am not getting a clue on how to hide that? Please help!
$('.menutoggle').mouseover(function(event) {
$('.menucontainer').hide();
$(this).next('.menucontainer').toggle();
});
$('#menutoggle').mouseout(function() {
$('.menucontainer').hide();
});
#menuwrap {
padding: 50px;
}
.menutoggle {
display: block;
z-index: 99;
border: 1px solid red;
}
.menucontainer {
display: none;
position: absolute;
left: 150px;
top: 50px;
z-index: 999;
border: 1px solid blue;
background: #999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="menuwrap">
Menu Toggle
<ul class="menucontainer">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Menu Toggle
<ul class="menucontainer">
<li>Four</li>
<li>Five</li>
<li>Siz</li>
</ul>
Menu Toggle
<ul class="menucontainer">
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
</div>
I've created a fiddle here: https://jsfiddle.net/rz3g78h1/1/
The primary issue is because your #menutoggle selector on the mouseout event needs to use a class selector, not an id. Change it to .menutoggle.
However this raises another issue where the menu rapidly flickers as the mouse moves between the elements due to the use of mouseout. To fix this you can amend the logic to use CSS alone to show/hide the submenus, like this:
#menuwrap {
padding: 50px;
}
.menutoggle {
display: block;
z-index: 99;
border: 1px solid red;
}
.menucontainer {
display: none;
}
.menutoggle:hover + .menucontainer,
.menutoggle + .menucontainer:hover {
display: block;
position: absolute;
left: 150px;
top: 50px;
z-index: 999;
border: 1px solid blue;
background: #999;
}
<div id="menuwrap">
Menu Toggle
<ul class="menucontainer">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Menu Toggle
<ul class="menucontainer">
<li>Four</li>
<li>Five</li>
<li>Siz</li>
</ul>
Menu Toggle
<ul class="menucontainer">
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
</div>
Related
I wanna have an animated Dropdown-menu as a Navigation!
In Css I've set transition height to 1s and in Javascript I add a value
of for the height property in an Eventlistener. When the ham-symbol is
clicked the menu should go down in a transition of 1s. The problem is that when I click the ham-symbol it does't move with transition...it just appears... I recently found out when I add display: block in the css dropdown menu it works, but then obviously the toggle click ham-symbol doesnt work anymore! Please help!
<nav>
<a href="#">
<img id="ham" alt="toggle menu" src="Images/hamburger.svg">
</a>
<div id="dropdown" class="hide-mobile">
<ul>
<li>
Home
</li>
<li>
Service
</li>
<li>
Einbruchschutz
</li>
</ul>
</div>
</nav>
#dropdown {
/* display: block */
border-top: 3px solid red;
position: absolute;
width: 80%;
top: 100%;
left: 10%;
height: 0;
background: #fff;
padding-top: 2.2rem;
box-shadow: 0 2px 2px lightgrey;
z-index: 1;
transition: height 1s;
}
let menu = document.getElementById('ham');
let nav = document.getElementById('dropdown');
menu.addEventListener('click', function(e) {
nav.classList.toggle('hide-mobile');
nav.style.height = "400px";
})
Take a look at this codepen.
You can make it better but your basic requirement is met.
You just needed to:
toggle the height, not the top.
set overflow-y: hidden;
If you want to keep your solution you can try something like that :
let menu = document.getElementById('ham');
let nav = document.getElementById('dropdown');
var isOpen = false;
menu.addEventListener('click', function(e) {
if (isOpen == false){
nav.classList.toggle('hide-mobile');
nav.style.top = "-100%";
isOpen = true;
}
else{
nav.classList.toggle('hide-mobile');
nav.style.top = "0%";
isOpen = false;
}
})
#dropdown {
border-top: 3px solid red;
position: absolute;
width: 80%;
top: 0;
left: 10%;
background: #fff;
padding-top: 2.2rem;
box-shadow: 0 2px 2px lightgrey;
z-index: 1;
transition: 1s;
}
/* Just for the example */
img{
height: 50px;
width: 50px;
margin-left:-5px;
margin-top:-5px;
}
<nav>
<a href="#">
<img id="ham" alt="toggle menu" src="https://static.thenounproject.com/png/195031-200.png">
</a>
<div id="dropdown" class="hide-mobile">
<ul>
<li>
Home
</li>
<li>
Service
</li>
<li>
Einbruchschutz
</li>
</ul>
</div>
</nav>
Click on "Run code snippet" to see the animation. If that does not work there is definitely a problem with your browser display, try on another machine and check that javascript is not disabled.
JSFiddle :
https://jsfiddle.net/t3wrhjpq/2/
Hi i wanted to make my div resizable as shown in the below image
As shown in the above image i want to resize my div which is not happening
codepen:https://codepen.io/anon/pen/bQGYmR
$(function()
{
$('.band').resizable();
$('#wrapper').resizable();
});
#wrapper {
padding-left: 0;
transition: all 0.5s ease;
height: 100%;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 210px;
height: calc(35vh - 6px); /* As you give a border of 3px */
overflow-y: auto;
background: rgba(0,0,0,0.9);
transition: all 0.5s ease;
border: 3px solid red;
color:white;
}
.stories-preview-wrapper{
position: fixed;
height: calc(65vh - 6px); /* As you give a border of 3px */
bottom: 0;
left: 0;
border: 3px solid green;
width: 210px;
}
.band{
position: relative;
border-top: 1px dotted red;
padding: 0px;
margin: 0px;
height: 2px !important;
text-align: center;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="wrapper" class="toggled hidden-xs">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>hello world</li>
<li>hello world</li>
</ul>
<div class="band">
<p><span>Heading</span></p>
</div>
</div>
<div class="stories-preview-wrapper">
<ul class="sidebar-nav">
<li>hello world 2</li>
<li>hello world 2</li>
</ul>
</div>
</div>
See this updated codepen for some additional hints.
First of all you need to add the jquery-ui.css to your code: https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
Second point: don't make the band resizable since it's just delimiter element. Instead, make the element before it resizable (in this case sidebar-nav). Create a wrapper for sidebar-nav and call $('.sidebar-nav-wrapper').resizable();
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>hello world</li>
<li>hello world</li>
</ul>
<div class="band"><p><span>Heading</span></p></div>
</div>
Third point: it's not clear from your screenshots which elements you want resizable. However $('#sidebar-wrapper').resizable(); seems to work if you remove overflow-y: auto; from the CSS.
I think there's still a lot of work to be done in this example, I just pointed out a few things that may help you get started.
I have a requirement to create below component by CSS or Javascript.
I will receive an array like [{'label':'status1'}, {'label':'status2'}, {'label':'status3'}, {'label':'status4'}, {'label':'status5'},{'label':'status6'}].
And it also support support the highlight red like below.
In this case, it will receive an array like [{'label':'status1', 'priority': 'high'}, {'label':'status2'}, {'label':'status3'}, {'label':'status4'}, {'label':'status5'},{'label':'status6'}].
It also support the click and hover event like below.
Actually I mainly does not understand how to implement the shape like below small one.
Here, The solution only for shape and hover effects.
Fiddle
<ul class="status">
<li><span>#</span>Status 1</li>
<li><span>#</span>Status 2</li>
<li><span>#</span>Status 3</li>
<li><span>#</span>Status 4</li>
<li><span>#</span>Status 5</li>
<li><span>#</span>Status 6</li>
</ul>
To create boxes with arraows there are a couple of solutions: SVG, CSS3 or image (the worst). See above comments for CC3 examples.
Using the :hover in CSS , it is possible to make it change color in CSS.
To make it select-able, add a click event listener on each box that changes the component state. Use that state in the render to add or not a class like .selected. Then again in CSS give this class some other colors
Here's another solution for that shape using pseudo element, position and transform.
.container {
font-size: 0;
}
.box {
position: relative;
font-size: 13px;
display: inline-flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 75px;
width: 100px;
border: 3px solid black;
background: white;
}
.box:not(:last-of-type) {
border-right: none;
}
.box:not(:last-of-type):after {
content: '';
background: inherit;
height: 8px;
width: 8px;
position: absolute;
left: 101%;
top: 50%;
z-index: 1;
border-top: 3px solid black;
border-right: 3px solid black;
transform: rotateZ(45deg) translate(-50%);
}
<div class="container">
<div class="box">
<span>#</span>
<span>Status 1</span>
</div>
<div class="box">
<span>#</span>
<span>Status 2</span>
</div>
<div class="box">
<span>#</span>
<span>Status 3</span>
</div>
</div>
I'll try to explain it as best as I can. I want to apply this principle to my own.
Tab Add Example
As you can see I'm adding 'tabs' to tab bar. When I add enough tabs to fill the whole tab bar, and I keep adding more, those tabs basically resize to fit the div. I don't want them to expand the div or to use the scroll bar to move among them. I want them to shrink within the div. You can see the exact example on the GIF I linked.
It should also behave the same on window resize.
Window Resize Example
Do you have any ideas on how to achieve this? I tried with JQuery but it was too much 'hard coding', it wouldn't work on resize, nor different screen resolutions.
HTML I want to apply:
<div class="l_tabs">
<div>
<ul id="myTab1" class="nav nav-tabs bordered">
<li class="tab-add"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
</ul>
</div>
</div>
When I add new tab it adds this
<li class="contentTab"></li>
JSFiddle
Any suggestions?
You can do this with Flexbox, you just need to set flex-basis
$(".add").click(function() {
$(".tabs").append('<li class="tab">Lorem ipsum</li>');
})
$('.remove').click(function() {
$('.tab').last().remove();
})
.tabs {
display: flex;
list-style: none;
padding: 0;
}
.tab {
border: 1px solid black;
flex-basis: 200px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
<li class="tab">Lorem ipsum</li>
</ul>
<button class="add">Add Tab</button>
<button class="remove">Remove Tab</button>
You can use display: table and display: table-cell for this:
$("#add").click(function() {
$("<li>", { "class": "tab", "text": "Lorem ipsum" }).appendTo(".tabs");
});
$("#del").click(function() {
$(".tab").last().remove();
});
.tabs {
display: table;
border-collapse: collapse;
padding: 0;
}
.tab {
display: table-cell;
width: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
<li class="tab">Lorem ipsum</li>
</ul>
<button id="add">Add Tab</button>
<button id="del">Remove Tab</button>
$('.tab-add').click(function() {
$('.tab-add').html('+');
var lastCount = $('#myTab1 li:last-child').html();
var plusOne = parseInt(lastCount) + 1;
$('#myTab1').append('<li class="contentTab">' + plusOne + '</li>');
});
* {
margin: 0; padding: 0;
}
.l_tabs {
width: 100%;
background-color: red;
}
#myTab1 {
display: flex;
list-style-type: none;
}
#myTab1 li {
display: flex;
justify-content: center;
flex: 1;
line-height: 50px;
color: white;
background-color: hsla(0, 0%, 20%, 1);
}
#myTab1 li:nth-child(even) {
background-color: hsla(0, 0%, 40%, 1);
}
.tab-add:hover {
background-color: hsl(0, 55%, 55%)!important;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="l_tabs">
<div>
<ul id="myTab1" class="nav nav-tabs bordered">
<li class="tab-add">click to add</li>
<li class="contentTab">1</li>
<li class="contentTab">2</li>
<li class="contentTab">3</li>
<li class="contentTab">4</li>
</ul>
</div>
</div>
fiddle
https://jsfiddle.net/Hastig/mx2mxgg1/2/
You can use flexbox to do exactly what you want
ul {
display: -webkit-box;
}
ul li {
-webkit-box-flex: 1;
background: #ddd;
padding: 10px 15px 6px 15px;
white-space: nowrap;
overflow: hidden;
max-width: 180px;
min-width: 60px;
border: solid #ccc 1px;
border-bottom: none;
border-radius: 5px 5px 0 0;
text-overflow: ellipsis;
}
I need a drop down menu for my asp.net website where I can have menu items as well as images. I need one like http://www.petcarerx.com/. If I keep mouse on any of menu item on blue bar ( Dogs, Cats, Other Pets, A drop down menu opens with menu items and some images. I want it to expand to full length horizontally. Please suggest me which control should I use?
Regards,
Asif Hameed
I have had good experiences with the Kendo UI menu by Telerik.
searching a little google, i stumbled upon this website:http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/
have a great tutorial for a great kind of jquery drop down menu
I use Superfish for this purpose.Multilevel and Image supported when slightly customize it.
use telerik menu control...
http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/templates/defaultcs.aspx
A quick example for you:
HTML:
<ul id="menu">
<li>Home</li>
<li>
about
<div class="submenu">
<div class="col1 border-right">
<ul>
<li>about link 1</li>
<li>about link 2</li>
<li>about link 3</li>
<li>about link 4</li>
</ul>
</div>
<div class="col2 border-right">
<img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
</div>
<div class="col3">
<img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
</div>
</div>
</li>
...
...
...
</ul>
jQuery:
$("ul#menu li").hover(function(){
$(this).find('a').next('.submenu').stop(true, true).slideToggle(300);
}, function(){
$(this).find('a').next('.submenu').stop(true, true).slideToggle(200);
})
CSS:
ul#menu {
width: 100%;
position: relative;
height: 30px;
background:#ccc;
border-bottom: 1px solid #666;
}
ul#menu li {
display: block;
float: left;
height: 30px;
line-height: 30px;
}
ul#menu li a { display: block; padding: 0 20px; }
.submenu {
position: absolute;
width: 100%;
left: 0px;
display: none;
border-bottom: 1px solid #ccc;
}
ul#menu li div.submenu ul li {
float: none;
}
.col1, .col2, .col3 {
width: 33%;
background: #f4f4f4;
float: left;
}
.col2, .col3 {
text-align: center;
}
.border-right { border-right:1px solid #ccc; }
DEMO