I have a nested unordered list that I want to expand accordion-like for new sub-items when a parent is clicked.
The functionality is working fine, but the parent list isn't sliding down to accomodate the newly visible sub-list (so the sub-list just slides on top of the unmoving parent list). I tried this on a fiddle and strangely it worked fine there. I'm guessing it has something to do with the CSS I'm using to format the list?
The code....
HTML:
<ul>
<li>
news
<ul>
<li>2013</li>
<li>2012</li>
<li>2011</li>
</ul>
</li>
<li>scores</li>
<li>standings</li>
<li>the ddl</li>
<li>records</li>
<li>teams</li>
</ul>
Javascript:
$(document).ready(function() {
$('#nav-bar ul li').on('click', function() {
$(this).children().slideDown('fast');
$(this).siblings().children().slideUp('fast');
});
});
CSS:
#nav-bar { /*left bar*/
float: left;
width: 110px;
text-align: center;
height: inherit;
}
#nav-bar ul { /*main menu*/
list-style-type: none;
text-align: left;
padding: 0px;
}
#nav-bar ul li { /*main menu item*/
height: 75px;
background-color: #666;
color: #ccc;
border-bottom: 3px solid #333;
}
#nav-bar ul li ul { /*sub-menu*/
display: none;
}
#nav-bar ul li ul li { /*sub-menu item*/
height: 35px;
background-color: #aaa;
color: #666;
border-bottom: 1px solid #333;
}
you fixed an height where it should be , IMHO, a min-height:
http://jsfiddle.net/7VPG6/36/
#nav-bar > ul> li { /*main menu item*/
min-height: 75px;
background-color: #666;
color: #ccc;
border-bottom: 3px solid #333;
}
take a look at : http://www.w3.org/TR/css3-selectors/
Related
I want to make a dynamic list of colors using jQuery and CSS (and ofc php but this is not related to my issue).
There is a problem when they click on 'choose a color' button my color list will appear and if user click on any of them others will get a display none and here is a problem if user try to change a selected color it doesn't work!
<div class="onfocus">
<div class="color-select">
<ul class="ul-color">
<li id="slect-color">choose a color</li>
<li>color1</li>
<li>color2</li>
<li>color3</li>
<li>color4</li>
<li>color5</li>
</ul>
</div>
</div>
$('.ul-color li').on('click',function(){
$(this).css('display','none');
for(var x = 0 ; x < 10; x++){
$('.ul-color li').eq(x).css('left', 90*x+'px');
}
$('.ul-color li').click(function(){
$('.ul-color li').css('display','none');
$(this).css('display','block');
$(this).css('left','20px');
});
});
.onfocus{
position: absolute;
left : 50%;
top :50%;
width: 1700px;
height: 300px;
background-color: #2c3e50;
transform: translate(-50%,-50%);
}
.color-select{
margin-top: 20px;
margin-left: 20px;
}
.color-select ul{
list-style: none;
max-width: 70px;
display: flex;
}
.color-select ul li{
margin-right: 10px;
padding: 10px;
position: absolute;
transition: .5s;
}
.color-select ul li:nth-child(1){
z-index: 10;
background-color: black;
border-radius: 5px;
}
.color-select ul li+li{
left: 20px;
}
.color-select ul li a{
color : #fff
}
.color-select ul li:hover{
background-color: #e74c3c;
border: none;
border-radius: 5px;
}
Before any click :
pic-1
After i clicked on 'choose a color' :
pic-2
if i select any color others will get a display none except the one that we selected and it will get a 'left 20px' too:
pic-3
so now if i want to change my selected color i have to click on my previous one and it should be something like 2nd picture but nothing gonna happen
pic-4
Try this,
HTML
<div class="onfocus">
<div class="color-select">
<ul class="ul-color">
<li id="slect-color">choose a color</li>
<li class="color">color1</li>
<li class="color">color2</li>
<li class="color">color3</li>
<li class="color">color4</li>
<li class="color">color5</li>
</ul>
</div>
</div>
CSS
.ul-color{
list-style-type:none;
display:flex;
}
.ul-color li{
margin:5px 10px;
border-radius:5px;
background:#333;
display:none;
}
.ul-color li a{
text-decoration:none;
display:inline-block;
padding:10px 15px;
color:#FFF;
border-radius:5px;
}
.ul-color li a:hover{
background:#e74c3c;
}
#slect-color{
display:inline-block;
}
Javascript
$('#slect-color').on('click',function(){
$('ul li').show();
});
$('.color').on('click',function(){
$('.color').hide();
$(this).css('display','block');
});
This is a bit too complex to handle everything with display: block and display: none. I slightly changed your code to add a few classes:
ul.initial is you initial state, where "Choose a color" is visible
ul.opened is when all colors are shown, for one to be picked
li.selected is the color you've picked
What you want is that any li shows up if:
We're in the initial state, and the li is the "Choose a color" one
We've opened the list, and the li is NOT the "Choose a color" one
The li is the one selected
Here's the CSS part that is interesting for you:
.color-select ul.initial #select-color,
.color-select ul.opened li:not(#select-color),
.color-select ul li.selected {
display: block;
}
And below, a working snippet based on your code, with my improvements:
$('.ul-color li').on('click',function() {
var list = $('.ul-color');
if (!list.hasClass('opened')) {
// Show all colors
$('.ul-color li').removeClass('selected');
} else {
// A color has been picked
$(this).addClass('selected');
}
list.toggleClass('opened');
list.removeClass('initial');
});
.onfocus{
/* Be careful, this part one changed only to be visible in the snippet */
position: absolute;
width: 100%;
height: 300px;
background-color: #2c3e50;
}
.color-select {
margin-top: 20px;
margin-left: 20px;
}
.color-select ul {
list-style: none;
display: flex;
}
.color-select ul li {
margin-right: 10px;
padding: 10px;
display: none;
z-index: 10;
background-color: black;
border-radius: 5px;
}
.color-select ul.initial #select-color,
.color-select ul.opened li:not(#select-color),
.color-select ul li.selected {
display: block;
}
.color-select ul li a {
color : #fff
}
.color-select ul li:hover{
background-color: #e74c3c;
border: none;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="onfocus">
<div class="color-select">
<ul class="ul-color initial">
<li id="select-color">choose a color</li>
<li>color1</li>
<li>color2</li>
<li>color3</li>
<li>color4</li>
<li>color5</li>
</ul>
</div>
</div>
I just started doing some jquery and php and I followed the tutorial from Udemy on how to build some php web site. Now I want to animate the li elements so that their border-radius changes on mouseenter().
Here is my code:
$(document).ready(function() {
$('.list_el').mouseenter(function() {
$(this).animate(borderRadius(300), 200);
});
function borderRadius(radius) {
return {
borderTopLeftRadius: radius,
borderTopRightRadius: radius,
borderBottomLeftRadius: radius,
borderBottomRightRadius: radius,
};
}
});
#nav {
margin: -27px 0 0;
margin-top: 50px;
}
#nav ul {
display: inline-block;
text-align: left;
list-style: none;
}
#nav ul li {
display: inline-block;
width: 90px;
height: 44px;
margin: 0 10px;
text-align: center;
}
#nav ul li a {
display: block;
padding: 10px 15px;
color: white;
border: solid 2px white;
background: #353535;
outline: solid 2px #353535;
text-decoration: none;
}
#nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
<div id="nav">
<ul id="my_navbar">
<li class="list_el">Home
</li>
<li class="list_el">Team
</li>
<li class="list_el">Menu
</li>
<li class="list_el">Contact
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
But when I enter the mouse on any of the li element (menu,contact..) it doesn't animate, I mean when I press F12 and target the li it shows me that the border-radius is changing but on the website it doesn't curve the border. So what am I doing wrong?
Just in case :
The animation works, it just has no visual effect: your a elements contains all the style, you'll see some change if you animate the a's border-radius or if you put overflow: hidden for list_el
$('.list_el').mouseenter(function() {
$(this).find("a").animate(borderRadius(300), 200);
});
this will work for instance
http://codepen.io/anon/pen/PGPrgY
You should use mouse enter and leave event together
$('.list_el').on("mouseenter", function() {
$(this).find("a").animate(borderRadius(300), 200);
}).on("mouseleave", function() {
$(this).find("a").animate(borderRadius(0), 200);
});
On any modern browser, you can also achieve this transition with simply:
.list_el:hover a {
border-radius: 300px;
transition: 0.2s;
}
That animates the border-radius of the contained a element over a period of 200ms when the .list_el containing the a is hovered.
Note that this assumes you were planning to add a mouseleave handler that undoes the border-radius. It doesn't apply if you were planning to leave the updated radius in place when the mouse leaves the element.
Example using 1s rather than 0.2s so it's more obvious:
#nav {
margin: -27px 0 0;
margin-top: 50px;
}
#nav ul {
display: inline-block;
text-align: left;
list-style: none;
}
#nav ul li {
display: inline-block;
width: 90px;
height: 44px;
margin: 0 10px;
text-align: center;
}
#nav ul li a {
display: block;
padding: 10px 15px;
color: white;
border: solid 2px white;
background: #353535;
outline: solid 2px #353535;
text-decoration: none;
}
#nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
.list_el:hover a {
border-radius: 300px;
transition: 1s;
}
<div id="nav">
<ul id="my_navbar">
<li class="list_el">Home
</li>
<li class="list_el">Team
</li>
<li class="list_el">Menu
</li>
<li class="list_el">Contact
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
I've made a bit lists and I think I'm lost with them when it comes to jQuery and making my menu to toggle on click event.
Here is what I have: http://jsfiddle.net/3rc63e3L/
The problem is in menu. When mouse is hovering the element, It is showing and when I click it - It hides. But when i'm deleting from CSS
ol > li:hover > ul
{
display: block;
}
It won't even work while clicking on Menu2 tab. The idea is to delete this "hover" thing on menu2 and make it work only for "click". How can i fix it?
You’re trying to toggle the list elements instead of the list itself. Just use the following JavaScript:
$('ol li.submenuone').click(function() {
$('ol li.submenuone ul').toggle();
});
And remove your CSS from above.
Demo: JSFiddle
use jquery instead of css..
$('ol > li.submenuone').click(function() {
$('ol > li.submenuone ul').slideToggle();
});
Use jQuery, initially subMenu should be hidden. Then sho/hide, toggle using jQuery. Changed the css as well.
$('ol li.submenuone').click(function() {
//alert("hello");
$('ol li.submenuone ul').toggle();
});
.nav
{
width: 100%;
padding: 10px 0;
background-color: red;
text-align: center;
box-shadow: 0px -1px 40px black;
position: relative;
z-index: 9999;
}
ol
{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
letter-spacing: 1px;
}
ol a
{
color: white;
text-decoration: none;
display: block;
}
ol > li
{
float: left;
width: 170px;
height: 40px;
border-right: 1px dashed #800517;
transition-property: background;
transition-duration: .4s;
}
ol > li:first-child
{
border-left: 1px dashed #800517;
}
ol > li:hover
{
background-color: #800517;
}
ol > li > ul
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
width: 100px;
display: none;
}
ol > li> ul
{
display: none;
}
ol > li > ul > li
{
padding: 2px;
background-color: red;
position: relative;
z-index: 9999;
border-top: 1px dashed #800517;
}
ol > li > ul > li:first-child
{
border-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="nav">
<ol>
<li>menu1</li>
<li class="submenuone">menu2
<ul>
<li class="submenutwo">sub1</li>
<ul>
<li class="submenuthree">sub1</li>
<li class="submenuthree">sub2</li>
<li class="submenuthree">sub3</li>
</ul>
<li class="submenutwo">sub2</li>
<li class="submenutwo">sub3</li>
</ul>
</li>
<li>menu3</li>
</ol>
</div>
I have been struggling the whole morning trying to add dropdown menus to a simple tabbed content I have on my page.
I'd like to have dropdown menus (containing 4 items) displayed when the user clicks on a tab. The dropdown menu should then stay visible until the user clicks on another tab.
Any idea how to implement it to the below? I guess it is pretty easy ...
Thanks so much!
<style type="text/css">
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #e9e9e9;
border-left: 1px solid #e9e9e9;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 21px ;
height: 31px;
line-height: 31px;
border: 1px solid #e9e9e9;
border-left: none;
font-weight: bold;
background: #EEEEEE;
overflow: hidden;
position: relative;
}
ul.tabs li:hover {
background: #4b4b4b;
}
ul.tabs li.active{
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.tab_container {
border: 1px solid #e9e9e9;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 13px;
font-family: arial;
color: #4b4b4b;
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
</script>
<html>
<ul class="tabs">
<li class="active" rel="tab1">TAB1</li>
<li rel="tab2">TAB2</li>
<li rel="tab3">TAB3</li>
</ul>
</html>
Ok so scratch what i just did and check this one out. I think it might work better for what you're after.
jsfiddle
you can change the a tags to li if you wish!
to edit the look of your active tab, watch for:
.active_tab{
}
and to edit the looks of your tab content edit:
.tabCont{
}
Hope it's right this time!
I feel like i'm doing something bad with jQuery here, but the following code sounds like the thing you are after:
$('li').on('mouseover', function()
{
var subMenu = '<ul id="subM" style="padding-left:'+this.offsetLeft+'px"> <li>First</li> </ul>';
if(!$('#subM').length > 0)
{
$('body').append(subMenu);
}
});
$('li').on('mouseout', function()
{
if($('#subM').is(':hover'))
{
$('#subM').on('mouseout', function()
{
$('#subM').remove();
});
}
else
{
$('#subM').remove();
}
});
JsFiddle: http://jsfiddle.net/7s5szjkh/
I've left the code you had untouched, just edit the content of the sub menu variable to show what you want.
Plus I guess you might want different sub menus per tab, but this is just a starting point.
I have used the below script to create multilevel megamenu with a lot of customizations.
Below is the JsFiddle link for the same.
WORKING FIDDLE LINK
Below is the CSS code for the same.
/* ######### Drop Down DIVs CSS ######### */
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: transparent;
border:none;
border-left: 2px solid #ffffff;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: #09519b;
background-color: #d6d6d6;
text-decoration: none;
padding: 8px 0px 8px 13px;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover{
font-weight:bold;
background-color:#bfbfbf;
}
/* ######### Neutral CSS ######### */
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
/* ######### Marker List Vertical Menu ######### */
.markermenu{
width: 175px; /*width of side bar menu*/
clear: left;
/*position: relative;*/ /*Preserve this for "right" arrow images (added by script) to be positioned correctly*/
position: absolute;
top:136px;
}
.markermenu ul{
list-style-type: none;
margin: 56px 0 0 0;
padding: 0;
/*border: 1px solid #9A9A9A;*/
}
.markermenu ul li a{
background: #d6d6d6; /*light gray background*/
color: #09519b !important;
display: block;
width: auto;
padding: 8px 0;
padding-left: 13px;
text-decoration: none;
/*border-bottom: 1px solid #B5B5B5;*/
}
.topRound{
border-radius:5px 5px 0 0;
}
.bottomRound{
border-radius:0 0 5px 5px;
}
* html .markermenu ul li a{ /*IE6 hack*/
width: 155px;
}
.markermenu ul li a:visited, .markermenu ul li a:active{
color: #00014e;
}
.markermenu ul li a:hover, .markermenu ul li a.selected{
font-weight:bold;
background-color:#bfbfbf;
}
/* ######### Customized Drop Down ULs CSS (inherits from ddlevelsmenu-base.css) ######### */
.blackwhite li a{
background: white;
}
.blackwhite li a:hover{
background: black;
color: white;
}
ul.miniBlocks{width:732px !important; background:#d6d6d6;}
ul.miniBlocks1{width:366px !important; background:#d6d6d6;}
.miniBlocks li{float:left !important;}
.miniBlocks1 li{float:left !important;}
.mattblackmenu a.selected, .ddsubmenustyle li.selected > a {
background: #bfbfbf; /*background of tab with "selected" class assigned to its LI */
color: #09519B;
font-weight:bold;
}
The script and css are working fine. When you move on to the navigation items, you can see the mouse over selection with a darker background color and font bold.
Now, this menu is coming dynamically from a js/jsp include file.
What I need is when a user wants to open up a page, onclick of it, the hover style should stay.
For instance,
If you mouse over on JavaScript Reference > Item Folder 5b > Item Folder 5.2b > Sub Item 5.2.1b and when you want to open Sub Item 5.2.1b, onclick of it, when the page relevant to Sub Item 5.2.1b opens, the hover style should stay on click for the user to know that he is on Sub Item 5.2.1b page when he again wants to hover and open another page or see on what page is he on.
Any other ways are welcomed, but should work on my dynamic scenario.
If this is for a single page app, then just give the active item an active class that you can style as the active item.
Otherwise, you will need to do this server-side. Your CMS/server-side app needs to give a class active to the current active menu item.
.ddsubmenustyle li a:hover,
.ddsubmenustyle li a.active {
font-weight:bold;
background-color:#bfbfbf;
}