I am trying to create a menu system that changes text based on what menu has been clicked on at the time, as I don't want to create dozen of pages that will be almost identical and require loads of loading.
I've looked online but I haven't found anything, probably because I haven't used the right key words but I was wondering what the best approach would be to accomplish this? I've found that you can use the visibility tag in css to hide text but this leaves a lot of blank lines and since i'm displaying a lot of text it would look awful
HTML:
<html>
<head>
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/menu.css">
</head>
<body>
<div id="accordian">
<ul>
<li class="active">
<h3><span class="icon-dashboard"></span>Menu 1</h3>
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li>
<h3><span class="icon-tasks"></span>Menu 2</h3>
<ul>
<li>Submenu 4</li>
<li>Submenu 5</li>
<li>Submenu 6</li>
</ul>
</li>
<li>
<h3><span class="icon-calendar"></span>Menu 3</h3>
<ul>
<li>Submenu 7</li>
<li>Submenu 8</li>
<li>Submenu 9</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
#import url(http://fonts.googleapis.com/css?family=Nunito);
* {margin: 0; padding: 0;}
body {
background: #4EB889;
font-family: Nunito, arial, verdana;
}
#accordian {
background: #004050;
width: 250px;
margin: 100px auto 0 auto;
color: white;
box-shadow:
0 5px 15px 1px rgba(0, 0, 0, 0.6),
0 0 200px 1px rgba(255, 255, 255, 0.5);
}
#accordian h3 {
font-size: 12px;
line-height: 34px;
padding: 0 10px;
cursor: pointer;
background: #003040;
background: linear-gradient(#003040, #002535);
}
#accordian h3:hover {
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
#accordian h3 span {
font-size: 16px;
margin-right: 10px;
}
#accordian li {
list-style-type: none;
}
#accordian ul ul li a {
color: white;
text-decoration: none;
font-size: 11px;
line-height: 27px;
display: block;
padding: 0 15px;
transition: all 0.15s;
}
#accordian ul ul li a:hover {
background: #003545;
border-left: 5px solid lightgreen;
}
#accordian ul ul {
display: none;
}
#accordian li.active ul {
display: block;
}
jQuery:
$(document).ready(function(){
$("#accordian h3").click(function(){
if(!$(this).next().is(":visible")) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
})
})
You don't need to change css, try to use hide() and show()
here is example
Thanks everyone for the help. I got it working by using an opentab function on the menu links and toggling display. Someone had suggested it but they seem to have deleted their answer.
Related
I have the following code in one of my projects. It displays the menu items. What I wanted is that, when someone clicks a link found at the particular list item, the background color of that particular list item should change.
Here I used grey for demo.
When the user clicks another list item, the previously clicked list item should go back to the original color, and the current list item should change into grey color. In addition to this, I wanted the text to change to white color for the currently selected list item.
I tried changing the style for a:visited, but it didn't work.
Any help would be greatly appreciated.
$('a').click(function(){
$(this).addClass("visited");
});
ul {
list-style-type: none;
}
.box li a {
font-size: 18px;
text-decoration: none;
color: black;
padding-left: 15px;
display: block;
height: 60px;
line-height: 60px;
}
.box li.active {
background-color: #ad2a2a;
font-weight: bold;
color: white;
}
.box li:hover {
background-color: rgba(198, 19, 52, 0.4);
}
.box li {
background-color: #e3e2e2;
margin-bottom: 1px;
position: relative;
transition: .2s;
margin-right: 10px;
}
a.visited {
color: #ffffff;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<ul class="box">
<li onclick="this.style.backgroundColor = 'grey';">Menu Item 1</li>
<li onclick="this.style.backgroundColor = 'grey';">Menu Item 2</li>
<li onclick="this.style.backgroundColor = 'grey';">Menu Item 3</li>
<li onclick="this.style.backgroundColor = 'grey';">Menu Item 4</li>
<li onclick="this.style.backgroundColor = 'grey';">Menu Item 5</li>
</ul>
Change CSS & Jquery
.box li.visited{
background:gray;
}
.box li.visited a{
color: #ffffff;
}
$('a').click(function(){
$('.box li').removeClass("visited");
$(this).parent().addClass("visited");
});
ul {
list-style-type: none;
}
.box li a {
font-size: 18px;
text-decoration:none;
color: black;
padding-left: 15px;
display: block;
height: 60px;
line-height: 60px;
}
.box li.active {
background-color: #ad2a2a;
font-weight: bold;
color: white;
}
.box li:hover {
background-color: rgba(198, 19, 52, 0.4);
}
.box li {
background-color: #e3e2e2;
margin-bottom: 1px;
position: relative;
transition: .2s;
margin-right: 10px;
}
.box li.visited{
background:gray;
}
.box li.visited a{
color: #ffffff;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<ul class="box">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
</ul>
You just need small tweaks in html and Jquery code, see the code snippet bellow:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<style>
ul {
list-style-type: none;
}
.box li a {
font-size: 18px;
text-decoration:none;
color: black;
padding-left: 15px;
display: block;
height: 60px;
line-height: 60px;
}
.box li.active {
background-color: #ad2a2a;
font-weight: bold;
color: white !important;
}
.box li:hover {
background-color: rgba(198, 19, 52, 0.4);
}
.box li {
background-color: #e3e2e2;
margin-bottom: 1px;
position: relative;
transition: .2s;
margin-right: 10px;
}
a.visited{
color: #ffffff !important;
}
</style>
<ul class="box">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
</ul>
<script>
$('a').click(function(){
$('a').removeClass("visited");
$('a').parents("li").removeClass("active");
$(this).addClass("visited");
$(this).parents("li").addClass("active");
});
</script>
</body>
</html>
Hope it will help you.
remove onclick="this.style.backgroundColor = 'grey';" which is not good practice.
modify css as
a.visited{
color: #ffffff;
background-color:grey;
}
Modify js as
$(document).ready(function(){
$('a').click(function(){
$('a').removeClass("visited");// remove class for all
$(this).addClass("visited");
});
});
My suggestion is to:
1) Toggle the classname .visited on the list item instead of the link, so you can control both the background color of the <li> and the color of the <a> element via CSS;
2) Use event delegation and detect the click event on the .box element just once and avoid to use inline click handlers or several click events (as it happens by $('a').click(...) );
3) Set the specificity of the CSS rules properly: since you defined a black color with
.box li a { }
you need to override the property with a selector whose specificity is at least equal (that's why a.visited{...} doesn't work).
document.querySelector('.box').addEventListener('click', function(ev) {
if (ev.target.matches('a')) {
ev.preventDefault();
if (!!document.querySelector('.visited')) {
document.querySelector('.visited').className = '';
}
ev.target.parentNode.classList.add('visited');
}
});
ul {
list-style-type: none;
}
.box li a {
font-size: 18px;
text-decoration:none;
color: black;
padding-left: 15px;
display: block;
height: 60px;
line-height: 60px;
}
.box li.active {
background-color: #ad2a2a;
font-weight: bold;
color: white;
}
.box li:hover {
background-color: rgba(198, 19, 52, 0.4);
}
.box li {
background-color: #e3e2e2;
margin-bottom: 1px;
position: relative;
transition: .2s;
margin-right: 10px;
}
.box li.visited {
background: gray;
}
.box li.visited a {
color: #ffffff;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<ul class="box">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
</ul>
$('a').click(function() {
$('li').removeClass("visited");
$(this).parent().toggleClass("visited");
});
ul {
list-style-type: none;
}
.box li a {
font-size: 18px;
text-decoration: none;
color: black;
padding-left: 15px;
display: block;
height: 60px;
line-height: 60px;
}
.box li.active {
background-color: #ad2a2a;
font-weight: bold;
color: white;
}
.box li:hover {
background-color: rgba(198, 19, 52, 0.4);
}
.box li {
background-color: #e3e2e2;
margin-bottom: 1px;
position: relative;
transition: .2s;
margin-right: 10px;
}
.box li.visited {
background-color: gray;
}
.box li.visited a {
color: #ffffff;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<ul class="box">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
</ul>
I'm trying to figure out how to close sub menu drop downs, if a user selects another menu or clicks outside of the menu (clicks something else on the page). I've read and tried a few different ways, but haven't gotten anywhere. I Just confused myself as to what is the best or right approach. Using regular JavaScript only - trying to learn.
HTML
<div class="container">
<div class="inner-wrap">
<ul id="filters">
<li>one
<ul class="dropM">
<li>I belong to one</li>
</ul>
</li>
<li>two
<ul class="dropM">
<li>I belong to two</li>
</ul>
</li>
<li>three
<ul class="dropM">
<li>I belong to three</li>
</ul>
</li>
<li>four
<ul class="dropM">
<li>I belong to four</li>
</ul>
</li>
</ul>
</div>
CSS
html {
box-sizing: border-box;
background:#ffc600;
font-family:'helvetica neue';
font-size: 20px;
font-weight: bold;
}
body {
margin: 0 auto;
padding: 50px 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
div.container {padding: 10px; background: #bada55; text-align: center;}
div.inner-wrap {margin: 0 auto; position: relative; display: inline-block;}
ul#filters { list-style: none;}
ul#filters li {display: inline-block; position: relative;}
ul#filters li > ul.dropM {list-style: none; position: absolute; top: 30px; left: -40px; padding: 15px; border: 1px solid #ccc; background: #fff; display: block; min-width: 200px; display: none; z-index: 201;}
ul#filters li > ul.dropM.open {display: block;}
ul#filters {display: inline-block;}
ul#filters li a.filterBtn {text-decoration: none; padding: 10px 20px; background: #ccc; color: black;}
JS
const filterMenuBtn = document.querySelectorAll('a.filterBtn');
const dropMenu = document.querySelectorAll('ul.dropM');
function openDropMenu(e){
filterMenuBtn.forEach(cliks => {
//console.log(cliks);
if(cliks === this) {
this.nextElementSibling.classList.toggle('open');
//console.log('i clicked this one');
}
});
}
filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));
JSFiddle
Update your javascript to this
const filterMenuBtn = document.querySelectorAll('a.filterBtn');
const dropMenu = document.querySelectorAll('ul.dropM');
function openDropMenu(e) {
if (e.type == 'click'){
e.currentTarget.nextElementSibling.classList.toggle('open');
} else {
e.currentTarget.nextElementSibling.classList.remove('open');
}
}
filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));
filterMenuBtn.forEach(cliks => cliks.addEventListener('blur', openDropMenu));
I wrote some code using different internet sources. I ran into a problem -
every object that's in the bottom part of the menu cannot be interacted with.
The menu interferes with everything below where the dropdown falls.
<style>
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
</style>
<html lang="he">
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
#nav_wrapper ul ul li{ text-align:left;}
you need to add this only: demo
You might be able to use vertical-align for the list elements & text-align for the links.
Just add a class to the <ul> tag of each dropdown and add text-align: left to it.
FIDDLE Here
My problem is when i mouse over the fois header its text doesn't changes to white color i don't know where i am wrong.or what to include.please help me........
another problem when the fois tab is active the color of the text appear as white
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- <link href="css.css" rel="stylesheet" />-->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="accord.js"></script>
<style>
.wrap {
margin-left: 0px;
margin-top: 0px;
width: 100px;
}
.accordion1 {
width: 178px;
margin: 0px;
padding: 0px;
list-style: none;
border: 1px solid #ddd;
}
.accordion1 h2 {
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
text-decoration: none;
padding: .25em .25em .25em 2em;
color: #333;
background: url('compo_images/gradient_v_gray.gif') repeat-x;
background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.accordion1 h2:hover {
background: url('compo_images/gradient_v_orange.gif') repeat-x;
color: white;
}
.accordion1 li div.content {
padding: 3px;
background: #fcfbfb;
border-bottom: 1px solid #ddd;
/*border: 1px solid #ddd;*/
}
.accordion1 li:hover h2 {
color: white;
background-image: url("./compo_images/arrow_exp_n.gif");
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
.accord > li {
padding: 0;
list-style-type: none;
}
.accord > li > a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left: 12px;
color: #5f5c5c;
background: url("./compo_images/arrow_pointer_se.gif") 0.002em no-repeat;
}
.accord > li > ul > li > a {
text-decoration: none;
color: #5f5c5c;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background: url("./compo_images/arrow_dirmini_orange_e.gif") 0.35em no-repeat;
padding-left: 17px;
}
.accord > li > ul {
list-style-type: none;
text-align: left;
margin: 0;
padding: 1px;
}
.accord {
text-decoration: none;
padding-left: 5px;
}
.accord > li > a:hover {
color: #f8b106;
}
.accord > li > ul > li > a:hover {
color: #f8b106;
}
.accordion1 > li > h2.active {
color: white;
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="accordion1">
<li>
<h2 id="first">CMT</h2>
<div class="content">
<ul class="accord">
<li>
main link1
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
<li>Link Four</li>
<li>Link Five</li>
</ul>
</li>
<li>
main link2
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
<li>Link Four</li>
<li>Link Five</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<h2 id="fois">FOIS</h2>
</li>
<li>
<h2>ASP</h2>
<div class="content">
<ul>
</ul>
</div>
</li>
<li>
<h2>PTT</h2>
<div class="content">
content PTT
</div>
</li>
</ul>
</div>
<!-- wrap -->
</body>
</html>
accord file
jQuery(function ($) {
$('.accord li').hover(function () {
$(this).find('ul').stop(true, true).slideDown()
}, function () {
$(this).find('ul').stop(true, true).slideUp()
}).find('ul').hide()
var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
var $h2s = $lis.children('h2').click(function () {
var $this = $(this), $t = $this.next();
$contents.not($t).stop(true, true).slideUp();
$this.toggleClass('active', !$t.is(':visible'));
$t.slideToggle();
$h2s.not(this).removeClass('active');
})
})
Because it's wrapped in <a></a> tag and the others are not wrapped in <a>
Demo
<li>
<h2 id="fois">FOIS</h2> // Your <h2> is wrapped in <a></a> here
</li>
You are declaring color: black; using inline CSS, which will be only overridden if you use !important in your stylesheet.
Secondly you need to target a element and not h2 because a will not inherit the parent elements color unless you specify something like a {color: inherit;} which will make all the a elements in your document inherit parent color, or to be specific you can use .accordion1 li h2 a {color: inherit;}, if you use this selector, than you don't have to target a else you need to as I've shared below..
.accordion1 li:hover h2 a {
color: white !important;
background-image: url("./compo_images/arrow_exp_n.gif");
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
I would suggest you to remove the inline style instead, and you won't have to use the !important anymore.
Demo
Change
<h2 id="fois">FOIS</h2>
To
<h2 id="fois">FOIS</h2>
And change
.accordion1 li:hover h2 {
To
.accordion1 li:hover h2,
.accordion1 li:hover h2 a {
Looks to me that your problem is with the inline style on the anchor element. This has a higher specificity than any style in a style sheet so should be used with moderation.
If you remove
color:black
from the anchor, and add:
color:black
to:
.accordion1 h2
That should do the trick.
Add Below class in your style
#fois a:hover{
color: white !important;
}
I want to add a top border to my navbar buttons when the mouse is hovered over them and then back to its original state when mouse is off the elements.
However my code does not seem to be working, I am using a function to do this in JavaScript as follows:
<script type = "text/javascript">
function border(element){
element.style.borderTop ='3px solid';
element.style.borderColor = '#d22b2b';
}
</script>
and the HTML:
<ul align="center">
<li onmouseover="border(this)">Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
With the above code nothing is happening at all when I hover the mouse over the first li element.
I updated your code and managed to get it working. Here is the jfiddle for it: http://jsfiddle.net/A2gkU/2/
The problem was that you had too much padding above/below the links, so even if there was a border showing up above, it got hidden by the padding.
HTML Codes:
<div id="navbar">
<ul align="center">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
CSS codes:
#navbar{
background-color: #fff;
overflow:hidden;
-moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.6);
box-shadow: 0px 1px 4px rgba(0,0,0,0.6);
padding:5px;
}
#navbar ul {list-style:none;
text-align: center;
margin: 5px;
font-family: Segoe UI;
font-size: 17px;
font-weight: bold;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration:none;
color:#302E2E;
padding-left: 15px;
background-color: #fff;
}
#navbar ul li a:hover { color: #F56; border-top: 3px solid #d22b2b;}