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.
Related
I tried to implement Tab controls. However, when I run the page, the 1st instance will have all the fields from other tabs visible in the 1st tab itself. If I click on 2nd tab and then comeback to 1st tab, I works as expected.
View:
<style>
.tabs {
height: 1475px; width: 100%; text-align: left; }
.tab-nav-wrapper {
width: 100%; overflow-x: auto; position: relative !important; z-index: 999 !important; top: 3px; }
.tabs ul {
display: block; overflow-y: hidden; margin: 0px; }
.tabs ul li {
display: inline-block; border: 1px solid grey; border-bottom: 3px solid blue; background-color: white; }
.tabs ul li.active {
border: 1px solid black; border-bottom: 3px solid white; }
.tabs ul li a {
text-decoration: none; color: blue; padding: 10px; line-height: 25px; position: relative; font-weight: bold; }
.tab-content-wrapper {
position: relative !important; z-index: 1 !important; border: 3px solid blue; padding: 20px; min-height: 40px; }
.tab-content {
display: block; height: 700px; width: 100%; }
</style>
<body>
<div class="tabs">
<div class="tab-nav-wrapper">
<ul>
<li id="tab1Section" class="active">Corporation Details</li>
<li id="tab2Section">Contact Information</li>
<li id="tab3Section">Documents</li>
</ul>
</div>
<div class="tab-content-wrapper">
<div id="tab1" class="tab-content">
Content 1
</div>
<div id="tab2" class="tab-content">
Content 2
</div>
<div id="tab3" class="tab-content">
Content 3
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$(".tab-nav-wrapper li").click(function (e) {
e.preventDefault();
e.stopPropagation();
$(".tab-nav-wrapper li").removeClass("active");
$(this).addClass("active");
var target = $(this).find("a").attr("href");
$(".tab-content-wrapper").find(".tab-content").hide();
$(".tab-content-wrapper").find(target).show();
})
});
</script>
Below is the result I have. As you can see, last field in the tab 1 is the button. But, I am getting that Tab 2 connect below that and tab 3 content after tab 2.
When I click on tab 2 and comeback to tab 1, it works as expected.
Can someone, help me with this please?
Change to
.tab-content {
display: none;
height: 700px;
width: 100%; }
.tab-content + .tab-content{
display: none;
It should hide all tabs but first one.
than your script will activate necessary tab
I have two drag and two drop zones that I'd like to keep exclusive from one another. I've been playing around with the connectWith argument unsuccessfully and was hoping to get some help connecting sortable_alpha to droppable_alpha and sortable_numbers to droppable_numbers. I also need to be able to use the .append function to add a delete button inside the drop divs which I have code for in the second chunk I realize there's lots of great JQuery draggable posts but couldn't find one on distinguishing separate drop zones so thanks for any help!
Drag Works but Not Drop
$(function () {
$("#sortable_numbers").sortable();
$("#sortable_numbers").disableSelection();
$("#sortable_alpha").sortable();
$("#sortable_alpha").disableSelection();
// once this works for numbers repeat this for the letters?
// create drag and drop where on drop a delete button is added to the list object
$(".draggable_numbers").draggable();
$("#droppable_numbers").droppable();
});
#droppable_numbers,
#droppable_alpha {
border: dashed 1px grey;
min-height: 100px;
width:100px;
float:left;
}
#sortable_numbers,
#sortable_alpha {
list-style-type: none;
margin: 0;
padding-bottom: 2px;
width: 50px;
float:left;
}
ul {
list-style: none;
padding-left: 0;
}
li {
list-style-type: none;
padding-bottom: 2px;
}
#sortable_numbers li,
#sortable_alpha li {
border: 1px solid lightgray;
}
#sortable_numbers li:hover,
#sortable_alpha li:hover {
cursor: grab;
}
#sortable_numbers .ui-sortable-helper:hover,
#sortable_alpha .ui-sortable-helper:hover {
cursor: grabbing;
background-color: #ddd;
border-color: black;
}
.droppable_numbers,
.droppable_alpha {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
/*
Need to change this so that the alpha blocks
Only change color when hovered over droppable-alpha
And droppable-numbers with sortable_numbers
*/
#droppable_alpha.ui-droppable-hover,
#droppable_numbers.ui-droppable-hover {
background: #bad4ed;
}
#droppable_numbers select {
margin: 5px;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable_alpha">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
</ul>
<div id="droppable_alpha">Drop Letters</div>
<div id="droppable_numbers">Drop Numbers</div>
<ul id="sortable_numbers">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
Working on an Answer
$(function () {
$("#sortable_numbers").sortable();
$("#sortable_numbers").disableSelection();
$("#sortable_alpha").sortable();
$("#sortable_alpha").disableSelection();
// once this works for numbers repeat this for the letters?
// create drag and drop where on drop a delete button is added to the list object
$(".draggable_numbers").draggable();
$("#droppable_numbers").droppable({
drop: function (event, ui) {
// take the id of the dropped block
// then create a new, unique id
// then append a delete button to the block
// inside the drop numbers
var draggableId = ui.draggable.attr("id");
var newid = getNewId(draggableId);
$(this).append("
<div>
<div>
<div class="form-group drop_area">
<label class="control-label" for="${newid}">${newid}</label>
<button class="delete">Delete</button>
</div>
</div>
</div>")
}
}
});
});
#droppable_numbers,
#droppable_alpha {
border: dashed 1px grey;
min-height: 100px;
width:100px;
float:left;
}
#sortable_numbers,
#sortable_alpha {
list-style-type: none;
margin: 0;
padding-bottom: 2px;
width: 50px;
float:left;
}
ul {
list-style: none;
padding-left: 0;
}
li {
list-style-type: none;
padding-bottom: 2px;
}
#sortable_numbers li,
#sortable_alpha li {
border: 1px solid lightgray;
}
#sortable_numbers li:hover,
#sortable_alpha li:hover {
cursor: grab;
}
#sortable_numbers .ui-sortable-helper:hover,
#sortable_alpha .ui-sortable-helper:hover {
cursor: grabbing;
background-color: #ddd;
border-color: black;
}
.droppable_numbers,
.droppable_alpha {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
/*
Need to change this so that the alpha blocks
Only change color when hovered over droppable-alpha
And droppable-numbers with sortable_numbers
*/
#droppable_alpha.ui-droppable-hover,
#droppable_numbers.ui-droppable-hover {
background: #bad4ed;
}
#droppable_numbers select {
margin: 5px;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable_alpha">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
</ul>
<div id="droppable_alpha">Drop Letters</div>
<div id="droppable_numbers">Drop Numbers</div>
<ul id="sortable_numbers">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
I'm working on a site to practise javascript and I can't figure this one out.
For some reason the second dropdown menu won't come down. I added console.log("hover") and it shows the message, meaning it detects the hover but doesn't show the menu.
I want to only show the menu that I hover on.
https://jsfiddle.net/py8mkvxq/
// Drop down menu
$(".shopDrop").hide();
$(".shop ul li").hover(function(){
$(this).find(".shopDrop").slideDown();
}, function(){
$(this).find(".shopDrop").slideUp();
});
// Drop down menu info
$("#doublePoints").hover(function(){
console.log("in");
$(this).find(".shopHoverInfo").css("display", "block");
$(this).find(".shopHoverInfo").fadeIn();
}, function(){
console.log("out");
$(this).find(".shopHoverInfo").hide().fadeOut();
});
Check out this JSfiddle! This adds functionality to all of the submenu links.
$(".shopDrop a").hover(function(){
//find the next sibling of the `.shopDrop a` that was hovered on and fade it in
$(this).next(".shopHoverInfo").fadeIn();
}, function(){
//find the next sibling of the `.shopDrop a` that was no longer hovered on and fade it out
$(this).next(".shopHoverInfo").fadeOut();
});
You're using .find(), which is making jQuery look for a child of #doublePoints. However, it's not a child, but the next sibling. Consequently, use .next().
Also, .css("display", "block") isn't unneccessary .fadeIn();.
.shopHoverInfo isn't a child of #doublePoints. You could use $.next() instead of $.find() but then the menu will close when you hover over the submenu, because you're no longer hovering over #doublePoints.
I would just move the .shopHoverInfo element into the #doublePoints link.
https://jsfiddle.net/py8mkvxq/3/
// Drop down menu
$(".shopDrop").hide();
$(".shop ul li").hover(function() {
$(this).find(".shopDrop").slideDown();
}, function() {
$(this).find(".shopDrop").slideUp();
});
// Drop down menu info
$("#doublePoints").hover(function() {
console.log("in");
//$(this).next(".shopHoverInfo").css("display", "block");
$(this).find(".shopHoverInfo").fadeIn();
}, function() {
console.log("out");
//$(this).next(".shopHoverInfo").css("display", "none");
$(this).find(".shopHoverInfo").fadeOut();
});
nav.shop {
width: 100%;
height: 100px;
background: #182024;
margin: 0;
}
nav.shop ul {
width: 960px;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
nav.shop ul li {
display: inline-block;
vertical-align: top;
padding-left: 25px;
}
nav.shop ul li h1 {
font-size: 35px;
margin-right: 20px;
}
nav.shop ul li h2 {
color: #fff;
text-decoration: none;
font-size: 35px;
margin-left: 10px;
}
nav.shop ul li a {
color: #fff;
text-decoration: none;
font-size: 35px;
padding-bottom: 10px;
padding-top: 10px;
display: block;
}
.shopDrop {
position: absolute;
background: #182024;
padding: 30px 10px 0 10px;
margin-top: -30px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
nav.shop ul li div a {
font-size: 20px;
}
nav.shop ul li div span {
font-size: 15px;
}
#shopMultiplier {
border-bottom: 5px solid #CA2525;
}
#shopAutoclicker {
border-bottom: 5px solid #2596CA;
}
#shopFarms {
border-bottom: 5px solid #CAB125;
}
#shopSkills {
border-bottom: 5px solid #35CA25;
}
.shopHoverInfo {
display: none;
width: 150px;
background: #1C262A;
text-align: center;
padding: 0;
color: #fff;
}
.shopHoverInfo h3 {
font-size: 17px;
background: #CA2525;
margin: 0;
padding: 10px 5px 5px 5px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.shopHoverInfo p {
font-size: 15px;
}
<nav class="shop">
<ul>
<li>
<h1>SHOP</h1></li>
<li>
<h2 href="#" id="shopMultiplier">Multiplier</h2>
<div class="shopDrop">
<a href="#" id="doublePoints">Double knowledge <span>☆</span><div class="shopHoverInfo">
<h3>Double Knowledge</h3>
<p>When you click you get 2x knowledge</p>
</div></a>
<a href="#" id="triplePoints">Triple knowledge <span>☆</span><div class="shopHoverInfo">
<h3>Triple Knowledge</h3>
<p>When you click you get 3x knowledge</p>
</div></a>
<a href="#" id="quadruplePoints">Quadruple knowledge <span>☆</span><div class="shopHoverInfo">
<h3>Quadruple Knowledge</h3>
<p>When you click you get 4x knowledge</p>
</div></a>
</div>
</li>
<li>
<h2 href="#" id="shopAutoclicker">Auto-clicker</h2></li>
<li>
<h2 href="#" id="shopFarms">Farms</h2>
<div class="shopDrop">
Simple mind's <span></span>
intelligent mind's <span></span>
</div>
</li>
<li>
<h2 href="#" id="shopSkills">Skills</h2>
</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have build a css drop down menu and when I select and option from it I want it to sure the selected option in the drop down but it shows the same thing that, doesn't change... I am using jQuery, I think the confusion comes with the ul and li and what my selectors have to be.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<title></title>
<style>
.dropdown-menu {
padding: 0;
margin: 0;
width: 130px;
font-family: Arial;
display: inline-table;
position: relative;
border: solid 1px #CCCCCC;
border-bottom-style: none;
background-color: #F4F4F4;
}
.dropdown-menu .menu-item {
display: none;
}
.dropdown-menu .menu-item-link {
display: table-cell;
border-bottom: solid 1px #CCCCCC;
text-decoration: none;
color: rgba(89,87,87,0.9);
height: 30px;
padding: 5px;
vertical-align: middle;
cursor: pointer;
}
.dropdown-menu:hover .menu-item {
border-bottom-style: solid;
}
.dropdown-menu .menu-item-link:hover {
background-color: #DDDDDD;
}
.dropdown-menu:hover .menu-item {
display: table-row;
}
.dropdown-menu .menu-item.active {
display: table-header-group;
}
.dropdown-menu .menu-item.active .menu-item-link:after {
width: 0;
height: 0;
content: "";
position: absolute;
top: 12px;
right: 8px;
border-top: 4px solid rgba(0, 0, 0, 1);
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("#account").click(function () {
alert($('.menu-item').val());
});
</script>
<ul class = "dropdown-menu">
<li class = "menu-item">
account
</li>
<li class = "menu-item">
gametime
</li>
<li class = "menu-item">
Cereal
</li>
<li class = "menu-item">
workhard
</li>
<li class = "active menu-item">
puppies
</li>
</ul>
</select>
</body>
</html>
you have to do like this:
$(".dropdown-menu .menu-item a").click(function () {
alert($(this).text());
$(".menu-item").removeClass("active"); // remove active class from li tags
$(this).closest("li").addClass("active"); // add active class to current clicked one
});
on click of anchor tag of li get it's text val() works only for input elements of form and ul,li and a are not input element you have to use text() to get its value and for showing it as selected add active class to clicked one and remove from others
FIDDLE DEMO
Check this out http://jsfiddle.net/DsfU3/I have made some changes to id of sme fields just have a look if it can help you $(document).ready(function(){
$(".menu-item-link").on('click',function () {
$(".menu-item").removeClass("active");
$("#"+$(this).text()).closest("li").addClass("active");
})
});
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/