I want to make multilevel responsive drop down menu. the problem is that on clicking on Purchase, Sale and New menu the drop down menus are appearing but they remain open on again click. i want to show/ hide it on click like the #handle. it means that when i click to Purchase menu the relevant drop-down list should be appearing, on again click it must be shown off. The same requirements are with Sale and New menus.
the code are below,
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="nav.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<nav class="showing">
<div id="handle">Menu</div>
<ul id="nav">
<li>Available Stock</li>
<li>
Purchase
<ul class="sub-menu">
<li class="sub-list">Purchase Return</li>
</ul>
<li>
Sale
<ul class="sub-menu">
<li class="sub-list">Sale Return</li>
</ul>
</li>
<li>Cash Recieve</li>
<li>Cash Payment</li>
<li>Cash Recieve</li>
<li>
New
<ul class="sub-menu">
<li class="sub-list">New Customer</li>
<li class="sub-list">New Supplier</li>
<li class="sub-list">New Town</li>
<li class="sub-list">New Product</li>
</ul>
</li>
<li>Opening Stock</li>
<li>Gate Pass</li>
<li>Sale History</li>
</ul>
</nav>
</div>
javascript:
<script>
$('#handle').on('click', function() {
$('ul').toggleClass('showing');
});
$('ul#nav li').on('click', function() {
$('.sub-menu').toggleClass('sub-menu');
});
</script>
css:
#charset "utf-8";
/* CSS Document */
body {
margin:0;
padding:0;
}
.clear {
clear:both;
}
ul {
list-style-type:none;
margin:0;
padding:0;
-moz-transition:max-height 0.4s;
}
ul#nav li {
background:#fff;
float:left;
}
ul#nav li a {
color:black;
display:block;
background:#fff;
padding:10px;
text-decoration:none;
border-bottom:1px solid green;
}
ul#nav li a:hover {
background:#000;
color:white;
}
ul#nav li .sub-list {
float:none;
}
.sub-menu {
display:none;
}
ul#nav li:hover .sub-menu {
display:block;
position:absolute;
}
#handle {
display:none;
}
#media screen and (max-width:480px) {
ul#nav li {
width:100%;
text-align:center;
}
ul {
max-height:0;
overflow:hidden;
}
.showing {
max-height:50em;
}
ul#nav li .sub-menu {
max-height:0;
}
.sub-menu {
max-height:2em;
}
#handle {
display:block;
background:#093;
color:#fff;
padding:10px;
text-align:center;
font-weight:bold;
cursor:pointer;
}
}
Try this
$('ul#nav a').on('click',function(e){
$(this).next('ul').toggleClass('sub-menu');
});
When you click on a link, ul tag that is next sibling of clicked link is shown.
Related
I'm working on blogger and I've been trying to make a menu with some dropdowns using JQuery but for some reason it isn't working on Blogger, in my pc it works just fine. I've added the scripts and the style to the page HTML and then I placed the body on a HTML block but it doesn't work there.
Picture from the blog structure with the HTML Block
Here's the demo I'm using on my pc.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.menu {
padding:10px 0;
width: 500px;
}
.menu ul {
list-style-type:none;
margin:0;
padding:0;
}
.menu ul li {
display:inline-block;
position:relative;
}
.menu ul li ul {
background-color:rgb(225,75,75);
position:absolute;
left:0;
top:40px; /* make this equal to the line-height of the links (specified below) */
width:200px;
}
.menu li li {
position:relative;
margin:0;
display:block;
}
.menu li li ul {
position:absolute;
top:0;
left:500px; /* make this equal to the width of the sub nav above */
margin:0;
}
.menu a {
line-height:40px;
padding:0 12px;
margin:0 12px;
}
.menu a {
color:#000;
text-decoration:none;
display:block;
}
.menu a:hover,
.menu a:focus,
.menu a:active {
color:rgb(255,00,00);
}
/* style sub level links */
.menu li li a {
border-bottom:solid 1px rgb(200,50,50);
margin:0 10px;
padding:0;
}
.menu li li:last-child a {
border-bottom:none;
}
/* show arrows for dropdowns */
.menu li.dropdown > a {
background-image:url('../img/arrow-down.png');
background-position:right 20px;
background-repeat:no-repeat;
}
.menu li li.dropdown > a {
background-image:url('../img/arrow-right.png');
background-position:right 16px;
background-repeat:no-repeat;
}
/* hide sub menu links */
ul.sub-menu {
display:none;
}
</style>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown').hover(
function(){
$(this).children('.sub-menu').slideDown(200,stop());
},
function(){
$(this).children('.sub-menu').slideUp(200,stop());
}
);
function stop(){
$('.sub-menu').stop(true, true);
}
});
</script>
</head>
<body>
<div class="menu">
<ul >
<li>Home</li>
<li class="dropdown">Streams
<ul class="sub-menu">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</li>
<li>Guides</li>
<li>Reports</li>
</ul>
</div>
</body>
</html>
Edit:
I've also trying making an alert in the JQuery function and when the mouse passed over the menu the alert appears but the dropdown doesn't.
The answer to my own question is... Blogger's gadget for HTML/Javascript block applies some css that was making the bar not show up. You can either find a way to remove the css from the gadget or simply place your HTML code on the HTML page.
I have been trying to fix this problem for a while. Basically I am creating a drop down menu that has divs that contain the ul's so that I can have a box with a fixed width which will allow me to have images within the box.
An example of this would be BestBuy.com's navigation menu. I really like the design, but I'm having a difficult time replicating it.
My CSS works without trouble ONLY when the li's are not links. Example: It works when it is <li>Link</li> and not <li>Link</li>.
Of course inside that <li> is another list.
Anyway, I decided to use JQuery to fix the issue and I am about halfway there.
Here is my JQuery:
$(document).ready(function () {
$(".navbar ul li").hover(function() {
$(".navlink > div:first").addClass("active");
}, function() {
$(".navlink > div:first").removeClass("active");
});
$(".secondarylink").hover(function() {
$(".secondarylink > div").addClass("active");
}, function() {
$(".secondarylink > div").removeClass("active");
});
});
Here is my markup:
<div class="navbar">
<ul>
<li class="navlink"> Products
<div class="secondlevel">
<ul>
<li class="secondarylink">Testing 1
<div class="thirdlevel two-columns">
<div class="column">
<ul>
<li>Testing 1 </li>
<li>Testing 2 </li>
<li>Testing 3 </li>
<li>Testing 4 </li>
</ul>
</div>
<div class="column">
<ul>
<li>Testing 1 </li>
<li>Testing 2 </li>
<li>Testing 3 </li>
<li>Testing 4 </li>
</ul>
</div>
</div>
</li>
<li class="secondarylink">Testing 2
<div class="thirdlevel">
<ul>
<li>Testing 1</li>
<li>Testing 2</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</li>
<li class="navlink">Test Link</li>
</ul>
</div>
And my styling:
body {
font-family:sans-serif;
background: #eee;
}
.navlink {
display:block;
}
.navbar {
background:lightblue;
width: 100%;
padding:0;
}
.navbar ul {
list-style:none;
padding:0;
margin:0;
}
.navbar ul>li {
display:inline-block;
}
.navbar ul li ul>li {
display:block;
}
.secondlevel {
position:absolute;
width:350px;
height:477px;
background:#fff;
padding:0;
border: 1px solid #c3c4c4;
}
.thirdlevel {
position:absolute;
width:350px;
height:477px;
background:lightgreen;
left:350px;
border: 1px solid #c3c4c4;
top:-1px;
}
.thirdlevel.two-columns {
width:700px;
}
.thirdlevel div:first-child {
position:absolute;
left:0;
}
.thirdlevel div {
position:absolute;
right:0;
}
.column {
width:350px;
}
.thirdlevel {
display:none;
}
.secondlevel {
display:none;
}
/*
.navbar ul li:hover > div:first-child {
display:block;
}
*/
.active {
display:block;
}
.hidden {
display:none;
}
.navbar ul li a {
display:block;
}
Demo
As you can see, in my CSS I had .navbar ul li:hover > div:first-child { display:block;}. This works, but without the links... Someone told me to try making the <a> display:block; but that didn't work either.
All I need to do(I think) is be able to select div:first-child for this to work, but so far I haven't found anything that works. What am I doing wrong?
Any help is greatly appreciated. Thank you people!
I'm not entirely sure what you're after, but maybe this helps.
With CSS:
.navbar > ul > li:hover > .secondlevel {
display: block;
}
.navbar .secondarylink:hover > .thirdlevel {
display: block;
}
Demo
With jQuery:
$(".navbar ul li").hover(function () {
$(this).find('.secondlevel').show();
}, function () {
$(this).find('.secondlevel').hide();
});
$(".secondarylink").hover(function () {
$(this).find('.thirdlevel').show();
}, function () {
$(this).find('.thirdlevel').hide();
});
Demo
It's doesn't matter with the <li>item</li> or <li>item</li> as long as you have the correct script.
As I looked into your script, the action you trigger is to add 'active' class to all the second/third level.
I've updated the script and now it only add class to the second level / third level accordingly.
$(this).find().addClass();
DEMO
I have a set of tabs in html which I want to highlight when selected. I am trying to use jquery to do this. But it does not seem to work.
$(function () {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('active');
}
});
}
a {
color:#000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited {
color:#000;
}
.nav {
padding:10px;
border:solid 1px #c0c0c0;
border-radius:5px;
float:left;
}
.nav li {
list-style-type:none;
float:left;
margin:0 10px;
}
.nav li a {
text-align:center;
width:55px;
float:left;
}
.nav li.active {
background-color:green;
}
.nav li.active a {
color:#fff;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
<li>tab1
</li>
<li>|</li>
<li>tab2
</li>
<li>|</li>
<li>tab3
</li>
<li>|</li>
<li>tab4
</li>
</ul>
That is doable with a on click event:
$(document).on("click", 'ul li', function(){
$('ul li').removeClass('active');
$(this).addClass('active');
});
a {
color:#000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited {
color:#000;
}
.nav {
padding:10px;
border:solid 1px #c0c0c0;
border-radius:5px;
float:left;
}
.nav li {
list-style-type:none;
float:left;
margin:0 10px;
}
.nav li a {
text-align:center;
width:55px;
float:left;
}
.nav li.active {
background-color:green;
}
.nav li.active a {
color:#fff;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
<li>tab1
</li>
<li>|</li>
<li>tab2
</li>
<li>|</li>
<li>tab3
</li>
<li>|</li>
<li>tab4
</li>
</ul>
Add an operator class which defines which tab is active/clicked.
HTML
<ul class="nav">
<li>tab1
</li>
<li>|</li>
<li>tab2
</li>
<li>|</li>
<li>tab3
</li>
<li>|</li>
<li>tab4
</li>
</ul>
Style it in CSS then do a click event in your Javascript/jQuery that looks like follows:
$(document).ready(function(){
$(".nav").on("click", "li", function(){
$(".active").removeClass("active");
$(this).addClass("active");
})
})
http://jsfiddle.net/scriptonic/pgw8qq9a/3/
This is all the jQuery/javascript you need:
$('.nav a').click(function() { // Hook up to the click event on your .nav anchors
$('.nav li').removeClass('active'); // Clear any existing active <li>'s
$(this).parent().addClass('active'); // Apply the active class to the <li> parent of the clicked <a>
});
This is pretty much the same as another (just some guy, I would have just added a comment, but I have no reputation points. Negative in fact), but a little more specific to the .nav class, so you're not adding events to all ul li elements, but only to the ones under your .nav class.
You could also do with with on, if your tabs are anything more than static...
$(".nav li a").click(function() {
$(".nav li").removeClass("active");
$(this).parent().addClass("active");
});
http://jsfiddle.net/pgw8qq9a/9/
$(function () {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('active');
}
});
}
a {
color:#000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited {
color:#000;
}
.nav {
padding:10px;
border:solid 1px #c0c0c0;
border-radius:5px;
float:left;
}
.nav li {
list-style-type:none;
float:left;
margin:0 10px;
}
.nav li a {
text-align:center;
width:55px;
float:left;
}
.nav li.active {
background-color:green;
}
.nav li.active a {
color:#fff;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
<li>tab1
</li>
<li>|</li>
<li>tab2
</li>
<li>|</li>
<li>tab3
</li>
<li>|</li>
<li>tab4
</li>
</ul>
html:
<ul class="nav">
<li><a onclick="add_select(this);" href="#tab1">tab1</a>
</li>
<li>|</li>
<li><a onclick="add_select(this);" href="#tab2">tab2</a>
</li>
<li>|</li>
<li><a onclick="add_select(this);" href="#tab3">tab3</a>
</li>
<li>|</li>
<li><a onclick="add_select(this);" href="#tab4">tab4</a>
</li>
</ul>
jquery:
function add_select(selected_nav){
$("ul#nav li a").removeClass("active");
$(selected_nav).addClass("active");
}
I'm looking to have an additional subnav to this accordion menu. I tried to add a child element to the nav ul li, but that didn't seem to work. Ideally, I would like to be able to list web projects under "web" and print under "print".
FIDDLE: http://jsfiddle.net/schermerb/rGMAu/1/
.header button {
cursor:pointer;
float:right;
padding:5px;
margin:10px 10px;
border:none;
border:1px solid #ececec;
background:#444;
color:#ececec;
}
.nav {
text-align:center;
background:#444;
}
.nav ul li {
text-transform:capitalize;
display:block;
border-bottom:1px solid #ececec;
}
.nav a {
display:block;
padding:10px;
color:#ececec;
}
.nav a:hover {
background:#029b9d;
color:#ececec;
}
<button id="show">Menu <span>+</span> <span style="display:none;">-</span>
</button>
<div class="clear"></div>
</div>
<div class="nav">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Web
</li>
<li>Print
</li>
</ul>
</div>
I have updated your js
$('.nav, .nav li ul').hide();
$('#show').click(function () {
$(".nav").toggle();
$("span").toggle();
});
$('.nav li').click(function(){
$(this).children('ul').toggle();
});
Updated jsFiddle File
Adding a child element was the right path.
http://jsfiddle.net/jonigiuro/rGMAu/2/
<li>Web
<ul class="sub">
<li class="item">item1</li>
<li class="item">item2</li>
</ul>
</li>
You hide the child element by default, and when you hover on the parent, you show the it:
ul li:hover ul
Here's the revelant css for your case:
.nav ul li ul {
color: red;
margin: 0;
padding: 0;
display: none;
}
.nav ul li:hover ul {
display: block;
}
.nav ul li ul li {
padding: 10px 0;
}
When I created a drop down menu using css, it generates a line break before and after drop down menu
Here is html code
<body>
<!--nav class="navi"-->
<div class="navi" id="navi">
<ul>
<li>Home</li>
<li>About us
<ul>
<li>History</li>
<li>Company Profile</li>
<li>Core Values And Mission</li>
<li>Strategy</li>
</ul>
</li>
<li>Our Brands
<ul>
<li>HAMARA GLUCOSE D</li>
<li>HAMARA HEALTH CARE PATENT PRODUCTS</li>
<li>WAHT'S NEW</li>
</ul>
</li>
<li>Nutrition Space
<ul>
<li>Product FAQ</li>
<li>Health & Wellness</li>
</ul>
</li>
<li>Media
<ul>
<li>News Paper Clippings</li>
<li>Product Photos</li>
<li>Founder which...</li>
</ul>
</li>
<li>HSS</li>
<li>Copackers & Investors</li>
<li>Career</li>
<li>Communities</li>
<li>Contact Us</li>
</ul>
</div>
<!--/nav-->
</body>
and here is css code
<style>
.navi ul li
{
float:left;
}
.navi ul li a
{
display:block;
padding: 10px;
text-decoration:none;
}
.navi ul li:hover > a
{
color:white;
}
.navi ul
{
display:inline-table;
list-style:none;
padding: 0 0px;
position:relative;
background:#C93;
}
.navi ul ul
{
display: none;
position:absolute;
}
.navi ul ul li
{
/*display:block;*/
float:none;
}
.navi ul li:hover > ul
{
display:block;
background:#FC0707;
}
</style>
So I don't want to generate a line break
*{
padding:0;
margin:0;
}
Add this to styles
try using the white-space property
assign this to the div:
.navi
{
white-space: nowrap;
}
some more examples
If you meant the first layer of a remove display:block; from below code else if it is the second layer of a i.e. menu options
Try chaning
.navi ul li a {
display:block;
padding: 10px;
text-decoration:none; }
to
.navi ul li > a {
display:block;
padding: 10px;
text-decoration:none; }
I believe that block style has been applied to ALL the a creating a break inside the menu options too
Where it generates line break? By default div display type is block which takes 100% width of its parent and obviously pushed content down which is next to it in the flow.
Do you want to add content before and after the menu?
#navi{
display: inline;
}
Also make before and after content's display property to inline ( if no width is specified ) or inline-block ( if you want to specify width ).