Develop Reference

How to select a <li> tag using JS

<style>
.sys_spec_text{}
.sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;}
.sys_spec_text li a{ color: #db0401; height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; display:inline-block; line-height:24px;}
.sys_spec_text li a:hover{ border:2px solid #e4393c; padding:0 5px; text-decoration:none;}
.sys_spec_text li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(img/sys_item_selected.gif) no-repeat right bottom; z-index:99; display:none;}
.sys_spec_text li.selected a{ border:2px solid #e4393c; padding:0 5px;}
.sys_spec_text li.selected i{ display:block;}
</style>
<ul class="sys_spec_text">
<li >xl<i></i></li>
<li >l<i></i></li>
</ul>
When the mouse is clicked manually, li border become red, but how to auto click it with JavaScript?

This will do what you want.
In CSS, define .clicked style with red border.
In javascript, add listeners to detect clicks, which then adds the class clicked to the element.
document.querySelectorAll("li").forEach(li => {
li.addEventListener("click", function(event) {
event.target.classList.add("clicked");
});
});
<style>
.sys_spec_text{}
.sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;}
.sys_spec_text li a{ color: #db0401; height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; display:inline-block; line-height:24px;}
.sys_spec_text li a:hover,
.sys_spec_text li .clicked { border:2px solid #e4393c; padding:0 5px; text-decoration:none;}
.sys_spec_text li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(img/sys_item_selected.gif) no-repeat right bottom; z-index:99; display:none;}
.sys_spec_text li.selected a{ border:2px solid #e4393c; padding:0 5px;}
.sys_spec_text li.selected i{ display:block;}
</style>
<ul class="sys_spec_text">
<li >xl<i></i></li>
<li >l<i></i></li>
</ul>

Please make it more clear. As I see from css, you show li border when it hovered. But then you ask about how to make the same with click. So it will lead to the situation when the element got border and further stay with it because there is no event to remove it.
Also you can use :active pseudo-class for anchor element that is the same as click js event.
If you want to immitate hover event you can listen to 'mouseenter'/'mouseleave' events to make the same as you did with css.
let listEls = [...document.querySelectorAll('.link')]
let firstLi = listEls[0]
/* === CLICK SECTION === */
// This is "click" event listener
listEls.forEach(e => {
e.addEventListener('click', event => {
console.log('link is clicked', event)
event.target.classList.add('selected')
})
});
// here we manually trigger "click" event on the first li
firstLi.click()
// The problem is that "selected" class has been added but if there is no method to remove it. Let's fix it
document.addEventListener('click', e => {
console.log(e)
if (!e.target.classList.contains('link')) {
listEls.forEach(el => el.classList.remove('selected'))
}
})
// Now if any li was clicked and has "selected" class, you can click anywhere else to remove it
/* === END CLICK SECTION === */
/* === HOVER SECTION === */
// To se how hover works comment the CLICK SECTION above and uncomment this HOVER SECTION
// DO not forget to comment hover rule for link in css
/*
listEls.forEach(e => {
e.addEventListener('mouseenter', e => {
console.log(e)
e.target.classList.add('selected')
})
});
listEls.forEach(e => {
e.addEventListener('mouseleave', e => {
e.target.classList.remove('selected')
})
});
*/
/* === END HOVER SECTION === */
.sys_spec_text {}
.sys_spec_text li {
float: left;
height: 28px;
position: relative;
margin: 2px 6px 2px 0;
outline: none;
list-style-type: none;
}
.sys_spec_text li a {
color: #db0401;
height: 24px;
padding: 1px 6px;
border: 1px solid #ccc;
background: #fff;
display: inline-block;
line-height: 24px;
}
/* If you want to check mouseenter/mouseleave events comment following block */
.sys_spec_text li a:hover {
border: 2px solid #e4393c;
padding: 0 5px;
text-decoration: none;
}
/* OR you can use :active pseudo-class, so then you have to disable js "click" event listener and comment :hover block above */
/*
.sys_spec_text li a:active {
border: 2px solid #e4393c;
padding: 0 5px;
text-decoration: none;
}
*/
.sys_spec_text li a.selected {
border: 2px solid #e4393c;
padding: 0 5px;
text-decoration: none;
}
.sys_spec_text li i {
position: absolute;
width: 10px;
height: 10px;
font-size: 0;
line-height: 0;
right: 2px;
bottom: 2px;
background: url(img/sys_item_selected.gif) no-repeat right bottom;
z-index: 99;
display: none;
}
.sys_spec_text li i {
position: absolute;
width: 10px;
height: 10px;
font-size: 0;
line-height: 0;
right: 2px;
bottom: 2px;
background: url(img/sys_item_selected.gif) no-repeat right bottom;
z-index: 99;
display: none;
}
<ul class="sys_spec_text">
<li><a class="link" href="javascript:void(0)" title="xl">xl</a><i></i></li>
<li><a class="link" href="javascript:void(0)" title="l">l</a><i></i></li>
</ul>

Use setInterval() method and check periodically and fire the event accordingly.

jQuery navigation drop-down menu not showing... any ideas?

Currently developing a website that contains a drop down navigation menu with jQuery. However I'm having an issue where the drop down isn't displaying on top of the other elements when I hover over the parent link... I think it's pretty obvious that it's a z-index issue but I have been stumped for a while now so any help would be appreciated.
HTML
<div class="navigation">
<ul>
<li>Link 1</li>
<li>Parent 1
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</ul>
</div>
CSS
.navigation {
position:relative;
background-color:#4F4F4F;
width:100%;
min-width:910px;
box-shadow: 0px 2px 3px rgba(0,0,0, .4);
z-index:10;
overflow-y:hidden;
overflow-x:auto;
height:auto;
}
.navigation ul {
margin:0;
padding:0;
list-type:none;
text-align:center;
position:relative;
}
.navigation ul li {
display:inline-block;
padding-left: 52px;
position:relative;
z-index:11;
}
.navigation ul li a {
display:block;
height:29px;
color:#fff;
text-decoration:none;
font-family: cabinmedium;
font-size:13px;
padding-top:18px;
position:relative;
z-index:11;
}
.navigation ul ul {
position:absolute;
width:auto;
display:none;
box-shadow: 0px 1px 1px #999;
margin-left:-10px;
background-color:#89c63b;
text-align:left;
padding-left:10px;
padding-right:10px;
z-index:11;
}
.navigation ul ul li {
display:block;
background-color:#89c63b;
padding:0;
width:auto;
min-width: 100px;
position:relative;
z-index:11;
}
jQuery
$(document).ready(function() {
$(".navigation ul li").hover(function() {
$(this).find("ul").stop().fadeToggle(400);
})
});
NOTE: I included the jQuery just incase but I have tested and it does infact fade in/out the navigation elements as it needs to.
Any ideas anybody?

'navigation' class will be as like below code without 'overflow-y', 'overflow-x'
.navigation {
position: relative;
background-color: #4F4F4F;
width: 100%;
min-width: 910px;
box-shadow: 0px 2px 3px rgba(0,0,0, .4);
z-index: 10;
/* overflow-y: hidden; */
/* overflow-x: auto; */
height: auto;
}
demo

How can I prevent the height of this navbar increasing when I scroll?

I have a floating horizontal navbar positioned using jQuery. It's perfect when the page is static, but as soon as I start scrolling, the navbar's height increases and I am unsure why.
I've a JSFiddle here to show the unwanted effect
Here's the html
<div id="stickyribbon">
<ul>
<li>Week1
</li>
<li>Week2
</li>
<li>Week3
</li>
<li>Week4
</li>
<li>Week5
</li>
<li>Week6
</li>
</ul>
</div>
Here's the css
#stickyribbon {
width:800px;
background: orange;
border-radius: 5px;
}
#stickyribbon ul {
display:table;
width:100%;
list-style-type: none;
}
#stickyribbon li {
display:table-cell;
font-size: 16px;
font-weight: bold;
vertical-align:middle;
}
#stickyribbon li a {
display:block;
color: #fff;
text-decoration: none;
}
#stickyribbon li a:hover {
color: yellow;
}
And lastly the JavaScript
$(function () {
var stickyRibbonTop = $('#stickyribbon').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyRibbonTop) {
$('#stickyribbon').css({
position: 'fixed',
top: '0px'
});
} else {
$('#stickyribbon').css({
position: 'static',
top: '0px'
});
}
});
});
I'd be grateful for any guidance, as I'm completely stumped.
TIA

You can change your CSS to the below, crucially you need to correctly define positioning, padding and margins to establish the layout in both states:
Demo Fiddle
#stickyribbon {
width:800px;
background: orange;
border-radius: 5px;
position:static;
top:0;
margin:15px 0;
}
#stickyribbon ul {
display:table;
width:100%;
list-style-type: none;
padding:0;
margin:0;
}
#stickyribbon li {
display:table-cell;
font-size: 16px;
font-weight: bold;
vertical-align:middle;
padding:0 40px;
}
#stickyribbon li a {
display:block;
color: #fff;
text-decoration: none;
}
#stickyribbon li a:hover {
color: yellow;
}

The div #stickyribbon has some margin and when the page is scrolled, the div is redrawn to fill that margin.
Add
margin:0;
to #stickyribbon ul and #stickyribbon li.

How to add a responsive menu bar to html website [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I want to make a responsive menu looks like following in my website.
I've already made my website responsive with CSS media queries. I want to add this kind of menu when the max-width : 479px .
This is my Project: Link to project

You can try to do something like this.For me it looks like drop down menu. It is just an suggestion
Fiddle LINK
<div class="dd_menu_wrapper">
<!-- MENU -->
<label for="dd-0" class="dd_label">Navigation</label>
<input type="checkbox" class="dd_toggle" id="dd-0">
<ul class="dd_menu">
<li>Home
</li>
<li class="dd_parent">
<label for="dd-1">Products</label>
<input type="checkbox" class="dd_trigger" id="dd-1">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>Link Five
</li>
</ul>
</li>
<li class="dd_parent">
<label for="dd-2">Resources</label>
<input type="checkbox" class="dd_trigger" id="dd-2">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>This is samplek
</li>
</ul>
</li>
<li>Contact
</li>
<li>Resources
</li>
<li>Resources
</li>
</ul>
</div>
CSS
/* _______________________________________________
01 MENU BAR
_______________________________________________ */
.dd_menu_wrapper {
width: 479px;
margin:0 auto;
position: relative;
z-index:9999;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:21px;
color: #ffffff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin-bottom:1px;
}
.dd_menu_wrapper a, .dd_menu_wrapper label {
color: #FFF;
text-decoration: none;
cursor: pointer;
-webkit-transition:color .3s;
-moz-transition:color .3s;
-o-transition:color .3s;
-ms-transition:color .3s;
transition:color .3s;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.dd_menu_wrapper a:hover,
.dd_menu_wrapper label:hover,
.dd_parent:hover label {
color:#000;
background-color:#eff0f1;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.dd_menu {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
*zoom: 1;
background: #565a5c;
}
.dd_menu:before, .dd_menu:after {
content:" ";
display: table;
}
.dd_menu:after {
clear: both;
}
.dd_menu li {
position: relative;
}
.dd_menu > li {
float: left;
font-weight:bold;
}
.dd_menu li a {
padding: 10px 15px;
display: block;
}
.dd_menu > li:hover {
background-color: #eff0f1;
color:#000;
}
.dd_menu li.dd_parent {
}
.dd_menu li.dd_parent ul li a {
color:#000;
text-decoration:none;
font-size:13px;
}
.dd_menu li.dd_parent ul li a:hover {
color:#000;
text-decoration:underline;
}
.dd_menu li.dd_parent > label {
display: block;
padding: 10px 15px;
background-repeat: no-repeat;
}
.dd_menu li.dd_parent > label a:hover {
color:#000000;
}
.dd_menu li.dd_parent > label a:active {
color:#000000;
}
.dd_menu li.dd_parent > label a:focus {
color:#000000;
}
.dd_menu li.dd_parent > label a:visited {
color:#000000;
}
.dd_menu li.dd_parent > label a {
color:#000000;
}
/* _______________________________________________
02 DROP DOWNS
_______________________________________________ */
.dd_menu ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
z-index: 999;
top: 41px;
left: -999em;
min-width: 170px;
background: #eff0f1;
color:#000;
}
.dd_menu .dd_trigger {
display: block;
position: absolute;
cursor: pointer;
width: 100%;
margin: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
/* _______________________________________________
03 DESKTOP VERSION
_______________________________________________ */
#media screen and (min-width: 768px) {
.dd_menu > li:hover > ul {
left:auto;
}
.dd_toggle, .dd_label {
display: none;
}
}
/* _______________________________________________
04 MOBILE VERSION
_______________________________________________ */
#media screen and (max-width: 767px) {
.dd_label {
display: block;
padding: 10px 15px;
cursor: pointer;
color:#ffffff;
background: #565a5c;
}
.dd_label:after {
width: 24px;
height: 24px;
content: url("../images/toggle.png");
float: right;
}
.dd_toggle, .dd_toggle:checked {
width: 100%;
display: block;
position: absolute;
cursor: pointer;
height: 40px;
margin: 0;
opacity: 0;
}
.dd_menu {
position: absolute;
background: #565a5c;
opacity:0;
visibility:hidden;
}
.dd_menu > li {
padding-right: 0;
float: none;
}
.dd_menu > li:hover {
background-color: transparent;
}
.dd_menu li ul {
display: block;
width: 100%;
top:auto;
left:auto;
width:auto;
z-index: 999;
visibility: visible;
margin-left: 0;
padding-left:12px;
background: none;
}
.dd_toggle:checked + .dd_menu {
opacity:1;
visibility:visible;
}
.dd_menu .dd_trigger + ul {
max-height:0;
opacity:0;
visibility:hidden;
}
.dd_menu .dd_trigger:checked + ul {
position: static;
max-height:999px;
opacity:1;
visibility:visible;
z-index: 999;
background-color:#eff0f1;
}
}

In smaller screen hide your menu with css .
.menu { display:none; }
make one button whos hide on larger screen and visible in smaller screen with help of media queries , then you can add java script like this
$(document).ready(function (){
$("#buttonId").click(function (){
$("#menu").slideToggle();
});
});

The image you included is probablly using Bootstrap Framework to achieve the responsiveness.
You can have a look at it here.
You will have to write CSS media queries to achieve that. You can refer to this tutorial to find how can you make a responsive navbar.

Demo
css
html,body {
margin:0;
padding:0;
}
header {
background-color:black;
overflow:hidden;
padding:2%;
}
#logo {
float:left;
width:calc(100% - 50px);
max-width:280px;
height:40px;
background-image:url('https://lh4.googleusercontent.com/-gjxoCu8Fu3c/AAAAAAAAAAI/AAAAAAAA-Wk/mVaqfjXjn4k/s46-c-k-no/photo.jpg'); /* your logo here! */
background-repeat:no-repeat;
/*background-size:100%;*/
}
nav {
float:right;
padding-top:10px;
}
.navitem {
color:#999;
font-family:Helvetica;
font-size:16px;
margin-left:5px;
text-decoration:none;
font-weight:bold;
padding:8px;
}
.navitem:first-child {
margin-left:0px;
}
.navitem:hover {
color:white;
}
#smartbutton {
float:right;
width:20px;
height:15px;
cursor:pointer;
padding:7px;
border:1px solid #999;
border-radius:6px;
margin-top:5px;
display:none;
}
.buttonline {
background-color:#999;
height:3px;
margin-top:4px;
}
.buttonline:first-child {
margin-top:0px;
}
/* standard menu */
#media only screen and (min-width:480px)
{
#smartbutton {
display:none;
}
nav {
display:inline-block !important;
}
}
/* smart menu */
#media only screen and (max-width:479px)
{
#smartbutton {
display:inline-block;
}
nav {
display:none;
width:100%;
position:relative;
top:5px;
}
.navitem {
border-top:1px solid #999;
display:block;
margin:0px;
}
.navitem:hover {
background-color:#333;
}
}
HTML
<header>
<a id="logo" href="#"></a>
<nav>
Link1
Link2
Link3
</nav>
</header>
jquery
// create smartbutton
$('nav').before('<div id="smartbutton"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
// add click listener
$('#smartbutton').click(function(event)
{
$('nav').animate({height:'toggle'},200);
});

I thinks its better to use Frameworks like Twitter Bootstrap or Foundation but as I've seen you example above I think it is Twitter Bootstrap. It is simple to use the frameworks.
Here is tutorials of Twitter Bootstrap. I give you the navbar link for you to see the example.
http://getbootstrap.com/components/#navbar
See the examples there.. just make you browser smaller for you to see how it is responsive..
I hope it will help you.

Why don't you use a framework? Here for example .
They have a component which is pretty much what you want.
And here you will find an article on how to style it to your liking.

CSS NavBar Transition Trouble

Im having trouble with my navigation bar hover effects specifically transitions(line 109/110). Essentially i want whichever link the mouse is hovering over to raise(margin increase of 2%) while the other links hold the margin of 0. The problem is that all the link margins increase by 2% whenever i hover on any of them. Its my first time posting so sorry for the messy code, if i broke any posting rules and/or if this question was unclear at all. I played around with it for abit and couldnt figure it out. Also if it is simpler i can figure out how to do it using javascript.
Cheers
<!DOCTYPE html>
<html>
<head>
<title>
Atticus Products
</title>
<script src="http://code.jquery.com
/jquery-1.9.1.js">
</script>
<script>
/*
$(document).ready(function(){
$("a").hover(function(){
$("a").animate({up:'250px'});
});
});
*/
</script>
<style>
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
font-size:100%;
background-color:#6ec247;
font-family: CaeciliaLTStd75Bold,Helvetica,Arial,Sans-serif;
}
#wrapper {
margin: 0 auto;
width: 50%;
height: 100%;
position: relative;
}
/*Header: Contains Logo and NavBar*/
#header {
border-bottom: 8px solid #f2f2f2;
overflow:hidden;
height: auto;
position:relative;
clear:both;
height:auto;
margin:0;
display:block;
}
#logoName {
max-width: 100%;
width:40%;
float:left;
height:150px;
}
#logoName a {
position:absolute;
bottom:0;
color:#FFFFFF;
text-decoration: none;
font-size:3em;
font-weight: bold;
}
/*NavBar*/
#nav {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
right:0;
width:60%;
float:right;
position:absolute;
bottom:0;
}
#nav li {
display: inline;
}
#nav li a {
display: inline-block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
font-size:1em;
margin-bottom:0;
}
#nav li a:hover {
color: #c00;
background-color: #000000;
opacity:0.5;
transition-property: margin-bottom;
transition-duration:4s;
margin-bottom:2%
/*this is where the problem is*/
}
/*Content: Contains Container1, LogoWords and Logo1*/
#content {
height: 60%;
text-align: center;
/*background-color: #4d8e2f;*/
color:#FFFFFF;
margin:0;
top:0;
display:relative;
font-weight: bold;
}
#container1 {
display: block;
max-width: 100%;
position:relative;
height:40.5%;
width:100%;
margin:0;
background-color:#6ec247 ;
z-index:0;
border-bottom: 8px solid #f2f2f2;
}
#logoWords{
z-index:1;
display:block;
position:absolute;
width:auto;
height:auto;
top:18.5%;
right:0;
color:#FFFFFF;
text-decoration: none;
font-size:2.5em;
font-weight: bold;
text-align:left;
}
#logo1 {
display:block;
z-index:1;
position:absolute;
left:0;
top:18.5%;
width:auto;
height:auto;
}
#content{
background-color:#6ec247 ;
}
#content p {
margin:0;
}
#footer {
height:10%;
width: 100%;
position: absolute;
bottom: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li>About</li>
<li>Our Approach</li>
<li>Careers</li>
<li>Contact</li>
</ul>
<div id="logoName">
Atticus <br>Products</br>
</div>
</div>
<div id="content">
<div id="container1">
</div>
<img id="logo1" src="image/justlogo.png" alt="logo" width="207"
height="214">
<div id="logoWords">
<p><br>We find the people</br> that make your company succeed</p>
</div>
<div id="content">
<p>
<br>Careers with Atticus</br>
</p>
</div>
</div>
<div id="footer">
<p>bam</p>
</div>
</div>
</body>
</html>

Your problem is in your jQuery.
Because you have $('a').animate it will effect every a element on the page.
You can get around this by changing 'a' to 'this' without quotation marks.
$(document).ready(function(){
$("a").hover(function(){
$(this).animate({up:'250px'});
});
});
This will only effect the element being hovered over.
Best of luck.