How can I change the styles of my menu on click? - javascript

How can I change the style of active menu/submenu which is selected by user? When I click a submenu, I want that submenu and its parent menu to have a different style (like hover, but permanent).
/*jQuery time*/
$(document).ready(function(){
$("#accordian h3").click(function(){
//slide up all the link lists
$("#accordian ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
/*custom font for text*/
#import url(http://fonts.googleapis.com/css?family=Nunito);
/*CSS file for fontawesome - an iconfont we will be using. This CSS file imported contains the font-face declaration. More info: http://fortawesome.github.io/Font-Awesome/ */
#import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);
/*Basic reset*/
* {margin: 0; padding: 0;}
body {
background: #4EB889;
font-family: Nunito, arial, verdana;
}
#accordian {
background: #004050;
width: 250px;
margin: 100px auto 0 auto;
color: white;
/*Some cool shadow and glow effect*/
box-shadow:
0 5px 15px 1px rgba(0, 0, 0, 0.6),
0 0 200px 1px rgba(255, 255, 255, 0.5);
}
/*heading styles*/
#accordian h3 {
font-size: 12px;
line-height: 34px;
padding: 0 10px;
cursor: pointer;
/*fallback for browsers not supporting gradients*/
background: #003040;
background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
#accordian h3:hover {
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
#accordian h3 span {
font-size: 16px;
margin-right: 10px;
}
/*list items*/
#accordian li {
list-style-type: none;
}
/*links*/
#accordian ul ul li a {
color: white;
text-decoration: none;
font-size: 11px;
line-height: 27px;
display: block;
padding: 0 15px;
/*transition for smooth hover animation*/
transition: all 0.15s;
}
/*hover effect on links*/
#accordian ul ul li a:hover {
background: #003545;
border-left: 5px solid lightgreen;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
display: none;
}
#accordian li.active ul {
display: block;
}
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js"></script>
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js"></script>
<div id="accordian">
<ul>
<li>
<h3><span class="icon-dashboard"></span>Dashboard</h3>
<ul>
<li>Reports</li>
<li>Search</li>
<li>Graphs</li>
<li>Settings</li>
</ul>
</li>
<!-- we will keep this LI open by default -->
<li class="active">
<h3><span class="icon-tasks"></span>Tasks</h3>
<ul>
<li>Today's tasks</li>
<li>Urgent</li>
<li>Overdues</li>
<li>Recurring</li>
<li>Settings</li>
</ul>
</li>
<li>
<h3><span class="icon-calendar"></span>Calendar</h3>
<ul>
<li>Current Month</li>
<li>Current Week</li>
<li>Previous Month</li>
<li>Previous Week</li>
<li>Next Month</li>
<li>Next Week</li>
<li>Team Calendar</li>
<li>Private Calendar</li>
<li>Settings</li>
</ul>
</li>
<li>
<h3><span class="icon-heart"></span>Favourites</h3>
<ul>
<li>Global favs</li>
<li>My favs</li>
<li>Team favs</li>
<li>Settings</li>
</ul>
</li>
</ul>
</div>
Here is a JSFiddle.

Just add this javascript code:
$("#accordian h3").click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
$('#accordian li a').click(function(){
$('.submenu-active').removeClass('submenu-active');
$(this).addClass('submenu-active');
});
and this CSS:
.active{
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
color: red; /* NOTE i INTENTIONALLY ADDED RED COLOR TO ILLUSTRATE BETTER */
}
.submenu-active{
background: #003545;
border-left: 5px solid lightgreen;
}
try this DEMO
Explanation:
When you click on a menu item you want to remove the .active class from the previously active item and set it to the clicked item. The same is applied to the submenu item where I add .submenu-active class instead .active

You can add .selected class to your CSS file:
.selected {
background-color: <your_color>;
}
And in your Javascript file:
$('#accordian li ul li').click(function(){
$('#accordian li ul li').removeClass('selected');
$(this).addClass('selected');
});

Create a css class with style you want. Add some class to your li's (for example class="li_to_click". Then use following code:
$('.li_to_click').click(function() {
$(this).toggleClass('class_with_style');
$(this).parent().toggleClass('class_with_style');
});
You may want to change the code according to your needs.

Related

How do i remove this background color from the other span after click another one

i made a span to have a background color when i clicked on its link but when i clicked another span i want the background color of the other one to be removed and and appear in the current one. please how do i do that.
CSS
list-style: none;
font-size: 14px;
padding: 7px 0px 7px 23px;
}
ul li a {
color: #676a74;
text-decoration: none;
}
ul li a span {
float: left;
width: 11px;
height: 11px;
margin-left: -13px;
margin-right: 5px;
top: 4px;
border: 1px solid #d1d3d7;
position: relative;
transition: all 0.5s ease-in-out;
}
ul li a span.active {
background: green;
}
HTML
<li>
<span class="list"></span>Electronics
</li>
<li>
<span class="list"></span>Clothes
</li>
<li>
<span class="list"></span>Home & Office
</li>
</ul>
JQUERY
e.preventDefault(); $(this).parent().find(".list").addClass("active").siblings().removeClass("active");
});
This should work
$(".list").removeClass("active");
$(this).addClass("active");
On click of a tag remove active class from all list class.now add active class to span which is children of a tag which clicked.
$('a').click(function(){
$(".list").removeClass("active");
$(this).children('.list').addClass('active');
})
ul{
list-style:outside none none;
}
ul li a {
color: #676a74;
text-decoration: none;
}
ul li a span {
float: left;
width: 11px;
height: 11px;
margin-left: -13px;
margin-right: 5px;
top: 4px;
border: 1px solid #d1d3d7;
position: relative;
transition: all 0.5s ease-in-out;
}
ul li a span.active {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<span class="list"></span>Electronics
</li>
<li>
<span class="list"></span>Clothes
</li>
<li>
<span class="list"></span>Home & Office
</li>
</ul>
for add active class on span click
$('.list').click(function(){
$(".list").removeClass("active");
$(this).addClass('active');
})

Is it possible to create a drop down with multiple columns (like mega menu) using html css and jquery without using any plugins?

I have to create a drop down with two columns just like the image It should be like when i click on the drop down menu it should display like this so far i am not successful!. This is the sample code i am working with.. if i execute this code it is no where what i am expecting and also i am new to coding.
$(document).ready(function() {
// NAV TOGGLE ONCLICK WITH SLIDE
$(".clickSlide ul").hide();
$(".clickSlide").click(function() {
$(this).children("ul").stop(true, true).slideToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONCLICK WITH FADE
$(".clickFade ul").hide();
$(".clickFade").click(function() {
$(this).children("ul").stop(true, true).fadeToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONHOVER WITH SLIDE
$(".hoverSlide ul").hide();
$(".hoverSlide").hover(function() {
$(this).children("ul").stop(true, true).slideToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONHOVER WITH FADE
$(".hoverFade ul").hide();
$(".hoverFade").hover(function() {
$(this).children("ul").stop(true, true).fadeToggle("fast"),
$(this).toggleClass("dropdown-active");
});
});
/**/
#navbar {
width: 100%;
padding: 10 10 10 10;
}
#dropdown1 {
width: 960px;
margin: 0 auto;
padding: 0;
height: 1em;
font-weight: bold;
}
#dropdown1 li {
list-style: none;
float: left;
}
#dropdown1 li a {
padding: 0px 0px 0px 5px;
text-decoration: none;
}
#dropdown1 li ul {
display: none;
background-color: #fff;
}
#dropdown1 li:hover ul,
#navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#dropdown1 li:hover li,
#navbar li.hover li {
float: left;
}
#dropdown1 li:hover li a,
#navbar li.hover li a {
background-color: #fff;
color: #000;
}
.topnav a {
color: #000;
text-decoration: none;
}
.topnav a:hover {
border-bottom: 1px solid gold;
}
.column {
display: inline-block;
list-style-type: none;
float: left;
margin: 5px 0 0 0;
padding: 0 5px 0 0;
width: 500px !important;
}
.column li {
float: left;
display: inline;
}
.column a {
color: #999;
text-decoration: none;
font-size: .7em;
}
.column a:hover {
border-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<ul id=dropdown1>
<li class="topnav">
<div class="column">
Services <span>▼</span>
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
<div class="column">
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
</ul>
</div>
if i understood properly,
This jsfiddle maybe helpful
looks like u use two div but have same class name, then with your css only set "column" .
so the two div will display in same position, that's why u have two div but only display one.
<div class="navbar">
<ul id=dropdown1>
<li class="topnav">
<div class="column">
Services <span>▼</span>
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
<div class="column2">
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
</ul>
then you should set column2's css
UPDATE:
this fiddle
look this fiddle above
i change the li and set
.column a:after{
content:"\a";
white-space: pre;
}
\a means line break, character U+000A, and white-space: pre tells browsers to treat it as a line break in rendering.
found answer here Line break (like <br>) using only css
I have developed drop-down as per your image, without using any plugin.
I am using:
HTML
CSS
Explaination:
I am using table tag to design multiple columns.
<table>
<tr>
<td></td>// for left-col links
<td></td>// for right-col links
</tr>
</table>
Then inside <td> tag I am using <ul><li></li></ul>tag. Inside <li> you can have multiple links.
Similarly I did for right-side column.
Full Code
CSS code
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.link-format {
list-style-type:none;
width:100px
}
</style>
HTML code
<body>
<h2>Dropdown Menu with multiple columns</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<table>
<tr>
<td>
<ul class="link-format" style="border-right:1px gray dashed">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</td>
<td>
<ul class="link-format">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
Working JsFiddle: https://fiddle.jshell.net/mayankBisht/cvsrqn3r/1/
Hope this helps.
Please reach out to me for more information/help.
Thanks.

How do I get this CSS/jQuery menu to open only on click, rather than hover?

Here is the codepen: http://codepen.io/anon/pen/pvQYog
The code laid out:
HTML
<center>
<div style="vertical-align:top;">
<ul class="navbar cf">
<!-- <li>item 2</li> -->
<li style="width:200px;">Category
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>More...
<ul>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
ul.navbar {
background:white;
border-style:solid;
border-color:gray;
border-width:1px;
width: 200px;
border-radius: 4px;
}
.ActiveListItem:after {
content: '\25BC';
float:right;
font-weight:bold;
padding: 0px 0px;
font-size:100%;
}
ul.navbar li a.ActiveListItem {
background:white !important;
color:black;
border-style:solid;
border-color:white;
border-radius:14px;
padding:3px 5px !important;
font-weight:normal !important;
margin-left:14px;/* got the activeitem centered with the list text this way*/
margin-right:0px;
}
ul.navbar li {
position: relative;
}
ul.navbar li a {
display: block;
color: white;
padding:10px 5px;
text-decoration:none;
transition: all .2s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
background:#a6d0e1;
color: #333;
font-weight:900;
}
ul.navbar li ul {
margin-top: 1px; /*Dictates how far away textbox is from list items*/
position: absolute;
background: #222;
left: em;
font-size: 14px;
min-width: 200px;
opacity: 0;
visibility: hidden;
z-index: 99;
box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
/*transition: all .1s ease-in-out;*/ /*the sideways opener*/
}
ul.navbar li:hover > ul { opacity: 1; visibility: visible; left: 0; }
ol, ul { list-style: outside none none; }
.hidden { display: none; }
JS:
// sub menus identification
$(function() {
$('.navbar ul li a').click(function(){
$('.navbar > li:first-child > a').text($(this).text());
$('.navbar > li > ul').addClass('hidden');
});
$('.navbar > li').mouseenter(function(){
$(this).find('ul').removeClass('hidden');
});
});
Also, a second less important question: Is there a way to make TWO items appear per row, rather than one item per row?
Replace your ul.navbar li ul with this. And also remove ul.navbar li:hover > ul.
ul.navbar li ul {
margin-top: 1px;
position: absolute;
background: #222;
font-size: 14px;
min-width: 200px;
display: none;
z-index: 99;
box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
}
And script would be -
$(function() {
$('.ActiveListItem').click(function(){
$('.navbar li ul').toggle();
});
});
This is the sample using your codes. You will need to modify to get what you need. Hope this might help you.
http://codepen.io/khay/pen/bNQZBN
You need to use onclick function for your requirment, i ll give you an example below.
<a onclick="window.open('/your url','name','scrollbars=1, width=600, height=800')" target="_blank">
<span style="cursor:pointer">
<p style="text-align:right;cursor:pointer;">
<small>tester</small>
</p>
</span>
</a>
This function will open a new window for you when you click on the text.

How To Make A Decent Drop Down Menu?

I am trying to add a dropdown navigation on my navigation links so far it has been great but the only issue now which I can't work out the contact is not staying next to the Community instead it's going down one line how can i force it to stay inline with everything else?
and the drop is floating to the left for some reason so how can I bring that under the dropdown (I plan to add multiple drop downs)
<style>
body {
padding: 0; /* Gets rid of the automatic padding */
margin: 0; /* on HTML documents */
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
font-size: 12px;
}
#navigation {
position: fixed;
float:right;
z-index:1;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
</style>
<style type="text/css">
ul {
list-style: none;padding: 0px;margin: 0px;
}
ul li {
display: block;position: relative;float: left;border:1px solid #000
}
li ul {
display: none;
}
ul li a {
display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;
}
ul li a:hover {
background: #f00;
}
li:hover ul {
display: block; position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #f00;
}
li:hover li a:hover {
background: #000;
}
#drop-nav li ul li {
border-top: 0px;
}
</style>
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Static Navigation</title>
</head>
<body>
<div id="navigation">
Home
About
Social
Community
<li>Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</div>
</body>
I added everything on one page so you can easily look at it and help with the problem
Thanks ;)
Add display: inline-block to your <li>.
JSfiddle Example
Well, if you are sure about width of navigation then dont go with "width:100%; " try to give width exactly where it supposed to be fit. Ex. Width: 900px;
You should put the all navigation links inside li tags,
<body>
<div id="navigation">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Social
</li>
<li>Community
</li>
<li>Contact
<ul>
<li>General Inquiries
</li>
<li>Ask me a Question
</li>
</ul>
</li>
</ul>
</div>
</body>
JSFiddle Example

jQuery Submenu not disappearing unless it is hovered once

Here is the html code:
<div class="main-nav main-nav-default">
<div class="container">
<div class="main-nav-logo">
<a class="logo-color" href="index.html">Centaur <span class="brand">Research</span></a>
</div>
<div class="main-nav-links">
<ul id="responsive">
<li>Home</li>
<li>About</li>
<li class="dropdown">Services
<ul class="dropdown-lists">
<li>Research Sector</li>
<li>Online Research</li>
<li>Travel Research</li>
</ul>
</li>
<li class="dropdown">Panel
<ul class="dropdown-lists">
<li>Discussion Group</li>
</ul>
</li>
<li>Contact</li>
<li class="dropdown">Language
<ul class="dropdown-lists">
<li><div class="translate"><div id="google_translate_element"></div></div> <script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-38654447-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></li>
</ul>
</li>
</li>
</ul>
</div>
</div>
Here is the jQuery:
$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
$(this).find(".dropdown-lists").slideDown();
$(".dropdown-lists").mouseleave(function(){
$(this).slideUp();
});
});
Basically the thing is that the dropdown works perfectly when I hover over it but it doesnt disappear unless I hover over the submenu thats .dropdown-lists class. If I hover over the .dropdown class and navigates away without hovering over the submenu the submenu doesn't disappear. It stays still unless I hover it over at least once.
I understand my jQuery only allows to slide the menu Up when it is hovered once, I want to know a code combination that would work even if I don't hover over the submenu.
Additionally here is the Dropdown CSS code, I doubt the the submenu somehow is not a child element of the parent main-nav-link or #responsive:
.main-nav-links {
padding: 20px 0px 20px 0px;
}
#responsive {
text-align: right;
}
#responsive li {
position: relative;
text-align: right;
display: inline-block;
}
#responsive li > a {
font-family: "Open Sans";
font-weight: 700;
padding-right: 10px;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#media (max-width: 992px){
#responsive li > a {
font-size: 12px;
}
}
#responsive li > a:hover {
color: #19B5FE;
}
.dropdown-lists {
text-align: center;
}
#responsive li .dropdown-lists li {
list-style: none;
margin-left: -29px!important;
border-top: 1px solid rgba(60,60,60,0.9);
padding: 10px 0px 10px 0px;
}
#responsive li .dropdown-lists li > a {
color: rgba(204,204,204,0.8);
font-size: 12px;
font-weight: 400;
}
#responsive li .dropdown-lists li > a:hover{
color: #fff;
}
#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 200%;
background: rgba(51, 51, 51, 0.8);
}
Update your jquery like this.
$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
$(this).find(".dropdown-lists").slideDown();
}).mouseleave(function(){
$(this).find(".dropdown-lists").slideUp();
});
DEMO
EDIT:
Additional problem comes for the dropdown in your latest fiddle because of the top property you have used in the dropdown CSS. Update the following class in your CSS.
#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 100%; /* It was 200% earlier */
background: rgba(51, 51, 51, 0.8);
}
.dropdown
{
height:40px;
}
Updated DEMO

Categories