I want to create smooth dropdown menu. The idea is: when clicking on orange element it will toggle black elements, and when clicking on black element it will toggle grey elements. But what i got is black element covering orange element with grey elements already toggled. I've used display:none; everywhere to make sure that it won't show up and.. Everything is toggled after clicking orange element. Using .hide() also doesn't want to help hide this elements. How can i make this black box (after click event) toggle below orange element and don't show grey? Also i don't know how to make grey element to not hide when someone will click on it.
$(".d").click(function(){
$(".d ul li").slideToggle(200);
});
$(".a").click(function(){
$(".b").slideToggle(200);
});
#container
{
width: 200px;
height: 500px;
background-color: rgba(0, 0, 0, 0.3);
overflow-y: scroll;
overflow-x: hidden;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
.a, .c
{
position: relative;
display: none;
width: 200px;
height: 100px;
margin-bottom: 10px;
background-color: black;
cursor: pointer;
}
.b
{
position: relative;
display: none;
margin-bottom: 5px;
padding: 0;
height: 100px;
width: 200px;
background-color: rgba(0, 0, 0, 0.6);
}
.d, .e
{
font-size: 20px;
position: relative;
width: 200px;
height: 100px;
margin-bottom: 10px;
background-color: orange;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div id="container">
<ul>
<li class="d">1
<ul>
<li class="a"></li>
<ul>
<li class="b"></li>
<li class="b"></li>
<li class="b"></li>
</ul>
<li class="c"></li>
<li class="c"></li>
</ul>
</li>
<li class="d">2</li>
</ul>
</div>
The page is getting over,so it can't scroll down so you should add element and can also use href="#id/.classname" inside element
for hide and then for looking page this can be done
$(document).ready(function(){
$(".a").hide();
$(".b").hide();
$(".d").click(function(){
$(".d").fadeIn('fast');
});
$(".a").click(function(){
$(".b").fadeIn('fast');
});
Related
When I hover over the main Icon of the first ul of my nav part, the dropdown menu appears in perfect location, however, when I hover over the sub menu items, a slight indentation appears that I can't seem to find the cause for.
Hovering over the three dots "..." icon:
Hovering over the sub item of the menu:
you can clearly see the indentation when I hover over the sub menu which I colored violet upon hover over, which is exactly when the indentation will occur.
.main-navigation {
position: absolute;
right: 0px;
margin-top: -20px;
margin-right: 15px;
width: 2em;
height: 2em;
color: #D9D9D9;
border: 1px solid #D9D9D9;
/* padding: auto; */
align-content: center;
}
.firstLevelul{
padding-left: 0;
list-style: none;
justify-content:flex-end;
}
.firstLevela{
display: block;
text-align: center;
font: normal small-caps 100 20px/1.8em 'Helvetica Neue';
text-decoration: none;
}
.firstLevela:hover{
color: #D9D9D9;
width: 1.5em;
height: 1.5em;
}
.secondLevelul{
display: none;
}
.secondLevela{
display: block;
}
.secondLevelli:hover{
background-color: violet;
}
.firstLevelli:hover > .secondLevelul{
display: block;
width: 200px;
height: 200px;
background-color: white;
border: 1px solid #D9D9D9;
margin-left: -169px;
}
<nav class="main-navigation">
<ul className="firstLevelul">
<li className="firstLevelli">
<MoreHorizIcon className="editDropDownIcon" />
<ul className="secondLevelul">
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
</ul>
</li>
</ul>
</nav>
This was a little hard to work with as you didn't provide much code.
But I believe the issue is based on your height: 1.5em in the firstLevela:hover selector in CSS.
I made this incredibly rudimentary JSFiddle to demonstrate
https://jsfiddle.net/t7gj9qx2/
Yes, that is due to em height, which gets height from the parent element font size. It is preferable to use rem or px.
#I edit the question:#
I have attached the html:
<div class="mainDiv">
<ul id="myUL">
<li id="li-1" class="myLI"></li>
<li id="li-2" class="myLI"></li>
<li id="li-2.1" class="myLI"></li>
<li id="li-2.2" class="myLI"></li>
</ul>
</div>
My UL is formatted dynamically, based on what comes back from the DB.
#-------------------------#
I have a UL, in which all the LIs within it are linked by an arrow.
In addition, I have LIs that consist of several LIs that are their subcategory, and when clicked on, the LIs subcategory - will go from dispaly: none mode, to display: inline-block mode.
My problem is when I have an LI that consists of several LIs, but is located at the end of the UL.
According to my CSS, after this LI, an arrow will appear, because basically, there is another LI in UL, it is just doesn't appear...
I have attached a picture that illustrates this.
As long as the LI that contains some LI is in the middle of the UL- everything is fine (like example A).
Once it's at the end of the UL (as in example B), I have an "unnecessary" arrow, which I would like not to show now, but only when my all LI are in display: inline-block.
I also attached my CSS.
ul#myUL {
list-style: none;
margin:auto;
}
li.myLI {
display:inline-block;
xpadding: 10px 25px;
xborder: 1px solid black;
margin: 0 25px;
position: relative;
}
li.myLI:not(:last-child):after {
content: '';
height: 1px;
background: black;
width: 50px;
position: absolute;
right: -50px;
top: 50%;
}
li.myLI:not(:last-child):before {
content: '';
position: absolute;
width: 0;
height: 0;
top: 50%;
border-style: solid;
border-width: 7px 0 7px 20px;
border-color: transparent transparent transparent black;
right: -50px;
transform: translateY(-50%);
}
div.mainDiv {
display:flex;
width:60%;
margin: auto;
border: 3px solid #73AD21;
}
I will really appreciate your help to resolve this.
Thanks!
I created a dropdown menu click, but it have a little weirdness. When I click the button dropdown, the dropdown menu has appear. But when I move my cursor to another (without click the button dropdown again), the dropdown menu dissapear and it has become hoverable dropdown menu not dropdown menu click (Sorry for my bad English)
How can I make the dropdown menu click always appear when I click the button dropdown and move the cursor?
(Here is my code)
HTML
<aside class="sidebar">
<ul>
<li><i class="material-icons">home</i>Homepage</li>
<li class="button_dropdown"><i class="material-icons">widgets</i>Events Organizer <i class="material-icons multi_menu">keyboard_arrow_right</i>
<ul class="dropdown_menu">
<li>Create Events</li>
<li>List Events</li>
</ul>
</li>
<li><i class="material-icons">people</i>Peserta Events</li>
</ul>
</aside>
CSS
aside.sidebar ul li ul.dropdown_menu {
opacity: 0;
visibility: hidden;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
}
aside.sidebar ul li ul.dropdown_menu.active {
opacity: 1;
visibility: visible;
height: auto;
width: 100%;
background-color: #34495e;
left: 100%;
top: 0;
transition: all 0.5s;
}
Jquery
$(document).ready(function () {
$(".button_dropdown").click(function () {
$(".dropdown_menu").toggleClass("active");
});
});
I personally would use hover rather than click for a child menu. Let me know how you go with this. Stays active until clicked out.
aside.sidebar ul li ul.dropdown_menu {
display: none;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
left:200px;
top:0;
}
aside.sidebar ul li ul.dropdown_menu.active {
display: block !important;
}
Working in this snippet.
$(document).ready(function() {
$('.button_dropdown').click(function() {
$('.dropdown_menu').toggleClass('active');
});
});
aside.sidebar ul li ul.dropdown_menu {
display: none;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
left:200px;
top:0;
}
aside.sidebar ul li ul.dropdown_menu.active {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="sidebar">
<ul>
<li>Homepage</li>
<li class="button_dropdown">Events Organizer
<ul class="dropdown_menu">
<li>Create Events</li>
<li>List Events</li>
</ul>
</li>
<li>Peserta Events</li>
</ul>
</aside>
Without changing your code too much, you can just remove the pointer-events (clicks, etc.) by adding:
pointer-events:none; to aside.sidebar ul li ul.dropdown_menu
and
pointer-events:auto; to aside.sidebar ul li ul.dropdown_menu.active
The hoverable dropdown menu is because you have set the opacity property to 0 in your css aside (dropdown_menu). You must change opacity:0 to opacity:1. Here is your code with error:
aside.sidebar ul li ul.dropdown_menu {
opacity: 0;
visibility: hidden;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
}
Replace by (fixed opacity):
aside.sidebar ul li ul.dropdown_menu {
opacity: 1;
visibility: hidden;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
}
I'm trying to create using jquery a draggable list into a sortable list.
Everything works, except when using CSS to transform this list into a grid. As soon as everything is displayed as a grid, the draggable into the sortable stops to work.
My HTML is:
<ul id="sortable2">
<li class="ui-state-highlight">A</li>
<li class="ui-state-highlight">B</li>
<li class="ui-state-highlight">C</li>
<li class="ui-state-highlight">D</li>
</ul>
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
</ul>
My page SCRIPT is:
$(function() {
$("#sortable").sortable();
$("#sortable2 li").draggable({
connectToSortable: "#sortable",
helper: "clone"
});
});
And the CSS I've added to make both UL display as grid is:
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#sortable li {
margin: 3px 3px 3px 0;
padding: 1px;
float: left;
width: 100px;
height: 90px;
font-size: 4em;
text-align: center;
}
#sortable2 {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#sortable2 li {
margin: 3px 3px 3px 0;
padding: 1px;
float: left;
width: 100px;
height: 90px;
font-size: 4em;
text-align: center;
}
Any ideas?
I'm using jquery-ui.css, jquery-ui.js and jquery.min.js.
Thanks
The reason this is occurring is because the children li elements are floated.
When an element is floated, it is essentially removed from the normal document flow, and in this case results in the parent element collapsing upon itself with a height of 0:
As a result, you can't drop elements into the #sortable element because it doesn't have a height.
The most common work-around is to use a clearfix to prevent the parent element from collapsing.
Either add overflow: auto to the container element (example):
ul {
overflow: auto;
}
or use a pseudo-element (example):
ul:after {
content: '';
clear: both;
display: table;
}
Alternatively, you could also just remove float: left from the li elements and set their display to inline-block instead. Additionally, vertical-align: top should be added to resolve a minor alignment issue when dragging the elements (example):
ul li {
display: inline-block;
vertical-align: top;
}
I'm working on the navigation bar for a website and currently the main menu is complete. However, the "Services" and "Products" buttons need to each have their own sub-menu. The sub-menu should normally be hidden from view and appears when the user mouse-overs on the respective button.
Here is a fiddle with the desired result. Obviously, I'd rather not use any javascript if possible.
The idea I had initially was to have sub-menu have position: absolute with a z-index value lower than that of the main-menu, so that it can slide underneath the main-menu. However, doing so messes up with the width if I give it width: 100% and since my site is responsive, I avoid static widths.
I also tried doing with relative positioning, but that doesn't work either.
Another thing I don't like with that approach is that the markup for the main menu and sub-menu get split. Is it possible to get the above result, but with this markup?
<nav>
<ul class="nav">
<li role="presentation" class="active">Home</li>
<li role="presentation">Services
<ul>
<li role="presentation">Link 1
<li role="presentation">Link 2
</ul>
</li>
<li role="presentation">Products
<ul>
<li role="presentation">Link 3
<li role="presentation">Link 4
</ul>
</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
Here is my code:
CSS
body {
font-size: 0;
}
.bodyframe {
display: inline-block;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}
.div_container {
max-width: 1460px;
width: 100%;
display: inline-block;
margin: 0 auto;
}
header {
width: 100%;
height: 49px;
}
.nav {
display: block;
position: relative;
list-style: none;
background: #304770;
z-index: 10;
}
.nav li {
display: inline-block;
background-color: #304770;
margin: 0 5px;
}
.nav li a {
padding: 12px 15px;
font-size: 18px;
color: #EFEFEF;
display: block;
}
.nav li.active a {
color: orange;
}
.nav li.active a:before {
width: 100%;
}
.nav li a:hover {
background-color: #304770;
color: orange;
transition: color 0.25s;
}
.nav li a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background-color: orange;
-webkit-transition: width 0.2s;
transition: width 0.2s;
}
.nav li:nth-last-of-type(1) a:after {
display: none;
}
.nav li a:hover:before {
width: 100%;
}
.nav li a:after {
content: "";
display: block;
position: absolute;
right: -8px;
top: 21px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
.subnav {
list-style-type: none;
display: block;
position: relative;
top: -49px;
margin: 0;
z-index: 1;
background-color: #ccc;
-webkit-transition: top 0.2s;
}
.subnav li {
display: inline-block;
background-color: #ccc;
margin: 0 5px;
}
.subnav li a {
padding: 8px 10px;
font-size: 14px;
color: #EFEFEF;
display: block;
}
HTML
<div class="bodyframe div_container">
<header>
<nav>
<ul class="nav">
<li role="presentation" class="active">Home</li>
<li role="presentation">Services</li>
<li role="presentation">Products</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
<ul class="subnav">
<li>Test</li>
<li>1243</li>
</ul>
</header>
</div>
If you only need the submenu to mimic the one in the example, without using jQuery, using the second chunk of HTML with the CSS you supplied you could do:
nav:hover~ul {
top: 0px;
}
This shows the next ul element, in this case the subnav, whenever the nav is hovered over ("~" selector means select the ul element preceded by nav:hover).
However, if you want to do something more dynamic... id suggest just using JS/jQuery as well