We Keep Coding

Only one list element goes first On page load

How to make that one li element will be first one, as user in the next page click (www.url.com/demo/#collapse1) - should be the first one or (www.url.com/demo/#collapse5) - shoul be the first one? and the other elements will stay in their places, when you are in same page. www.url.com/demo
$('li').click(function() {
$(this).prependTo($(this).parent());
});
body {
font-family: verdana;
font-size: 12px;
}
a {
text-decoration: none;
color: #000;
display: block;
width: 100%;
padding: 8px 0;
text-indent: 10px;
}
a:hover {
text-decoration: underline;
}
ul {
list-style: none;
}
ul li {
background: #eee;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>

I'm pretty sure you're looking for a way to swap between the first element and the clicked on element. Here's a way to accomplish that by using .detach. First, we grab the .siblings and then we grab the first element from the list via .eq. From there we detach it (or remove it from the HTML but keep it stored as a variable. Next we prepend our clicked on element to the parent, detaching that one too only after assigning first has been appended to after our current element. Basically, swapping the two elements.
$('li').click(function() {
first = $(this).siblings().eq(0).detach()
$(this).parent().prepend($(this).after(first).detach());
});
if (window.location.hash != "") {
$('li').eq(Number(window.location.hash.slice(1))-1).click();
}
body {
font-family: verdana;
font-size: 12px;
}
a {
text-decoration: none;
color: #000;
display: block;
width: 100%;
padding: 8px 0;
text-indent: 10px;
}
a:hover {
text-decoration: underline;
}
ul {
list-style: none;
}
ul li {
background: #eee;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>

two functions interfering with each other

So my first stab at web development is proceeding reasonably well.
However... I want to have two separate drop down menus, but the JavaScript functions are interfering with each other... That is, if both functions are active at the same time, clicking on one drop down will cause the other drop down to react or stop working. It is probably something massively stupid, but I have little time left. here is the code:
//Control sliding menu on screens smaller than a specified breakpoint.
(function(menu_button, links, breakpoint)
{
"use strict";
var menulink = document.getElementById(menu_button),
menu = document.getElementById(links);
menu.className = "start";
setTimeout(function()
{
menu.className = "collapsed";
}, 20);
menuLink.onclick = function()
{
if (menu.className === "displayed")
{
menu.className = "collapsed";
}
else
{
menu.className = "displayed";
}
return false;
};
window.onresize = function()
{
if (window.innerWidth < breakpoint)
{
menu.className = "collapsed";
}
};
})("menuLink", "navLinks", 700);
That was function No.1, here is No.2:
function dropFunction()
{
"use strict";
document.getElementById("myDropdown").classList.toggle("drop");
}
window.onclick = function(e)
{
"use strict";
if (!e.target.matches('.dropbtn'))
{
var dropdowns = document.getElementsByClassName("dropdownContent");
for (var d = 0; d < dropdowns.length; d++)
{
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains("drop"))
{
openDropdown.classList.remove("drop");
}
}
}
}
and HTML if at all usefull:
<nav>
<p id="menuLink">MENU</p>
<ul class="displayed" id="navLinks">
<li>Home</li>
<li>Portfolio</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
<div class="dropdownContent" id="myDropdown">
<img class="externalLink" src="images/faceBook.png" style="width:20px">
<img class="externalLink" src="images/linkedIn.png" style="width:20px">
<img class="externalLink" src="images/soundCloud.png" style="width:20px">
</div>
and CSS:
.nav
{
display: inline;
position: absolute;
bottom: 220px;
padding-right: 60px;
width: 100%;
background-color: transparent;
font-family: "verdana";
font-size: 20px;
text-align: center;
}
.nav li
{
display: inline;
}
.nav a
{
display: inline-block;
padding: 50px;
text-decoration: none;
color: #E4E4E4;
}
.nav a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
.nav a:active
{
color: #5B4CA8;
}
li.drops
{
display: inline-block;
}
.dropdownContent
{
display: none;
position: absolute;
background-color: transparent;
box-shadow: none;
minimum-width: 20px;
}
.dropdownContent a
{
color: transparent;
text-decoration: none;
display: block;
text-align: center;
}
.drop
{
display: block;
}
#menuLink
{
width: 100%;
background-color: transparent;
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
#menuLink a
{
text-decoration: none;
font-family: "helvetica";
color: #E4E4E4;
}
#menuLink a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
#menuLink a:active
{
color: #5B4CA8;
}
#navLinks
{
position: absolute;
list-style-type: none;
width: 100%;
background-color: transparent;
padding: 0;
margin: 0;
text-align: center;
z-index: 1;
opacity: 1;
-webkit-transition: all ease-out 0.5s;
transition: all ease-out 0.5s;
}
#navLinks a
{
display: block;
padding: 10px;
font-family: "helvetica";
color: #E4E4E4;
text-decoration: none;
font-size: 18px;
}
#navLinks a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
#navLinks a:active
{
color: #5B4CA8;
}
#navLinks.start
{
display: none;
}
#navLinks.collapsed
{
top: -12em;
opacity: 0;
}
Thanks for your help!

You have used the window.Onlcick event to specify behaviors for the dropdowns if the user is not clicking on something with class "drop". This event will fire if you click on any item in that window because events bubble up like that in JavaScript.

How can I override an anchor element's font color when applying an active class to its parent li element?

I have a navigation bar with three buttons which I'm trying to highlight when they're active by applying "active" class to the li elements using jQuery - the border and font color are supposed to change. So far, only the border color changes while the text remains the same.
Also, I'd like to override or prevent the :hover pseudo class when the link is active.
Here's the codepen which will hopefully make this clearer.
Could you please advise how to override the a element's font color?
Thanks!

You have HTML looking like
<ul class="topnav">
<li class="topnavli">
Link 3
</li>
.......
Then styles for the anchors
.topnav a { color: #fff; }
then you add the active class to the LI elements, but the styles are only set as
.active { color: #FFADA0; }
That's just styling the LI element, not the anchors inside, and the specification states that by default an anchor tag does not inherit attributes like color from the parent element if a href attribute is present, so those styles must be set directly on the anchor with something like
li.active a { color: #FFADA0; }
As the border is set on the LI element, that should be changed with a specific style for that element, so you end up with
li.active {
border:3px solid #FFADA0;
}
li.active a {
color: #FFADA0;
}
Codepen

Add
.topnav .active a {
color: #FFADA0 ;
}
$('.topnav li').click(function() {
$(".topnav li.active").removeClass("active");
$(this).addClass('active');
});
.header h1 {
font-family: 'Montserrat', sans-serif;
font-size: 44px;
letter-spacing: 3px;
margin: 0;
padding: 15px 0 15px 30px;
display: inline-block;
color: #fff;
}
.topnav {
position: fixed;
top: 0;
width: 100%;
list-style: none;
font-family: 'Montserrat', sans-serif;
background-color: #000;
z-index: 1;
}
.topnav li {
display: block;
float: right;
margin: 20px 8px 0 0;
}
.topnavli {
border: 3px solid #fff;
}
.topnav li:first-child {
margin-right: 50px;
}
.topnav li:hover {
border: 3px solid #6fb7b7;
transition: 0.3s;
}
.topnav .active a {
color: #FFADA0 ;
}
.topnav a {
display: block;
color: #fff ;
font-weight: 600;
padding: 10px 0 ;
font-family: 'Raleway', sans-serif;
text-align: center;
text-decoration: none;
width: 120px;
}
.topnav a:hover {
color: #6fb7b7;
text-decoration:none;
transition: 0.3s;
}
.active {
color: #FFADA0 ;
border:3px solid #FFADA0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="header">
<ul class="topnav">
<li class="topnavli">
Link 3
</li>
<li class="topnavli">Link 2</li>
<li class="topnavli">Link 1</li>
<h1>website</h1>
</ul>
</div>

Show sub-menu on click [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
My menu is working on hover.
When I hover first level, it shows the second level menu.
I would like to change this so that when I click first level, it shows the second level and it stays visible.
This is my code on jsfiddle
<ul class="mainNav">
<li>Cours collectifs
<ul class="dropDown">
<li>RPM</li>
<li>Bodypump</li>
<li>Bodyattack</li>
<li>Bodycombat</li>
<li>Bodyjam</li>
<li>Bodybalance</li>
<li>Cxworx</li>
</ul>
</li>
</ul>
$(function () {
var url = window.location.pathname;
var urlRegExp = new RegExp(url.replace(/\/$/, ''));
$('.mainNav li a').each(function () {
// and test its href against the url pathname regexp
if (urlRegExp.test(this.href)) {
$(this).addClass('active');
$(this).closest('.mainNav>li').children('a').addClass("active");
}
});
});
$("ul.mainNav li").hover(function () {
$(this).find("ul.dropDown").css({ "display": "block" }).fadeTo('500', '1.0');
}, function () {
$(this).find("ul.dropDown").fadeTo('200', '0.0').css({ "display": "none" });
});
My css
#import url(http://fonts.googleapis.com/css?family=Raleway:600,800);
ul.mainNav {
margin:0;
padding:0;
list-style-type:none;
background-color: #f0eff0;
height: 28px;
font-family: 'Raleway', sans-serif;
color: #606060;
float: right;
margin-right: 100px;
}
.menu-wrapper{
background-color: #f0eff0;
height: 3.4em;
}
.mainNav li {
margin:0;
padding:0;
list-style-type:none;
height: 28px;
line-height:28px;
float: left;
color: #606060;
font-size: 14px;
}
.mainNav li a {
padding: 0 20px;
line-height: 3.8em;
display:block;
color: #606060;
text-decoration:none;
font-family: 'Raleway', sans-serif;
font-weight: 800;
text-transform: uppercase;
}
.mainNav li:hover > a {
color: #ffc102;
}
.mainNav li a:hover{
color: #ffc102;
}
.mainNav li ul.dropDown {
margin:0;
padding:0;
position: absolute;
display: none;
background: #fff;
opacity: 0.0;
height: 3em;
}
.mainNav li ul.dropDown li {
float: left;
height: 28px;
line-height: 28px;
margin: 0;
padding: 0;
font-size: 12px;
color: #606060;
/*font-weight: normal;*/
}
.mainNav li ul.dropDown li a {
font-family: 'Raleway', sans-serif;
font-weight: 400;
line-height: 4em;
height: 28px;
display:block;
padding: 0 20px;
color: #606060;
text-transform: uppercase;
}
.mainNav li ul.dropDown li a:hover {
color: #ffc102;
}
.img-logo-coach-menu {
position: absolute;
margin-left: 5em;
}
.active {
background: #DCDCDC
color: #ffc102;
/*opacity: 1;*/
/*visibility: visible;*/
}
I was trying to do something like that
$('.mainNav li a').click(function(){
$('.mainNav li a ul.dropDown').hide();
$(this).closest(" .dropDown" ).css({"display" : "block"});
$(this).closest(" .dropDown" ).css({"opacity" : 1});
$(this).next().show();
});
but it is not working.

Mike you were not using your selectors properly, jquery always depends upon your DOM structure so your code might be correct but its possible that it will not give you desired result.
I just updated http://jsfiddle.net/mst0057o/4/
code correct is as follows
$('.mainNav > li a').click(function(e){
e.preventDefault();
$(this).next("ul.dropDown").css({"display" : "block"}).fadeTo('500', '1.0');
});
rest of part you need to take care, i just updated click function.

change active selection from list in css

I have one little problem, I included submenu on this page: http://www.shadowopsweaponry.com/default.aspx.
On the left side there is 'gunsmithing' category and if you click on that link a new submenu pops up below that link.
Also there are two other submenus 'gun coating' and 'firearm training' which are acting same, even if you click on other main link after that, they are staying highlighted.
When I am clicking on some of the submenu links I want that selection to be highlighted and not the one which I selected before that, how can I achieve that?
Edit: Adding CSS.
.arrowsidemenu {
width: 180px; /*width of menu*/
background: #212121;
}
.menucontents div.selected a { /*header that's currently selected*/
color: #f93;
}
.arrowsidemenu .menuheaders a { }
.arrowsidemenu div a { /*header bar links*/
font-size: 12px;
display: block;
padding-left: 10px;
padding-top: 4px;
text-decoration: none;
}
.arrowsidemenu div a:link, .arrowsidemenu div a:visited {
color: #fff;
}
.arrowsidemenu div a:hover { }
.arrowsidemenu div.unselected a { /*header that's currently not selected*/
color: #fff;
}
.arrowsidemenu div.selected a { /*header that's currently selected*/
color: #f93;
}
.arrowsidemenu ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: inherit;
}
.arrowsidemenu ul li {
line-height: 8px;
padding-left: 12px;
}
.arrowsidemenu ul li a { /*sub menu links*/
display: block;
font-size: 12px;
text-decoration: none;
color: #FFF;
padding: 5px 0;
padding-left: 10px;
}
.arrowsidemenu ul li a:hover { }
.active-sub-menu {
color: #f93;
}

Your class called "selected" is being placed onto div > a href. You need that class instead to land on ul > li> a href. This is a problem in your .aspx, not really in the css.
If you get the html fixed, you'll want to change this line:
.arrowsidemenu div.selected a {
color: #FF9933;
}
At that point, probably you can just use .selected instead.
You can see these more easily by using Firebug, addon for Firefox. If you get it, you can right-click an item to see what styles are applied.