Develop Reference

Onclick Function sidebar

I am new to Javascript and I've recently been trying a sidebar menu.
I am trying to make the menu come out from the left side and overlay the main content when the hamburger icon is clicked. I have managed to make the menu overlay the main content but when it comes to javascript animation, I have tried a couple of things and search on internet but found no solutions to my problem.
I am trying to make so that when the .hamburger button is clicked, the .nav-links div's width changes from 0px to 300px.
Here's my code and a couple of Javascript functions I have tried.
Here's my code
HTML :
<button class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<div class="nav-links">
<ul>
HEN
BBG
YSMB
<div class="CloseBTN">×</div>
</ul>
</div>`
CSS
`
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
.hamburger {
position: relative;
cursor: pointer;
z-index: 1;
top: 0px;
background: inherit;
border: none;
display: block;
outline: none;
}
.nav-links {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 0px;
background-color: rgb(0, 0, 0);
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
border: solid white 1px;
}
.nav-links a {
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 20px;
display: block;
padding: 50px 8px 50px 64px;
color: white;
text-align: center;
}
.nav-links a:hover {
background: white;
color: black;
}
.CloseBTN {
position: absolute;
top: 15px;
right: 25px;
font-size: 36px;
margin-left: 32px;
cursor: pointer;
}
JavaScript
document.getElementById('hamburger') = function openMenu(){
document.getElementById('nav-links').menu.style.width="300px";
}
function openMenu(){
if(document.getElementById('nav-links').click === true)
document.getElementById('nav-links').menu.style.width="300px";
}

Try this:
document.getElementsByClassName('hamburger')[0].addEventListener("click", evt => {
document.getElementsByClassName('nav-links')[0].style.width = "300px"
})
document.getElementsByClassName('CloseBTN')[0].addEventListener("click", evt => {
document.getElementsByClassName('nav-links')[0].style.width = "0"
})
.line {
width: 30px;
height: 3px;
background: white;
border: 5px solid black;
margin: 5px;
}
.hamburger {
position: relative;
cursor: pointer;
z-index: 1;
top: 0px;
background: inherit;
border: none;
display: block;
outline: none;
}
.nav-links {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 0px;
background-color: rgb(0, 0, 0);
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
border: solid white 1px;
}
.nav-links a {
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 20px;
display: block;
padding: 50px 8px 50px 64px;
color: white;
text-align: center;
}
.nav-links a:hover {
background: white;
color: black;
}
.CloseBTN {
color: white;
position: absolute;
top: 15px;
right: 25px;
font-size: 36px;
margin-left: 32px;
cursor: pointer;
}
<button class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<div class="nav-links">
<ul>
HEN
BBG
YSMB
<div class="CloseBTN">×</div>
</ul>
</div>
Some of your javascript was messed up so I fixed that, and I added some css to make everything (such as the actual menu lines itself) visible.

How do I add a "Smooth Scrolling" feature to my page's buttons?

I am trying to create a smooth scrolling effect on the buttons of my Codepen using the Javascript from this example page and it still "snaps" to the section of the page instead of smoothly scrolling to the section.
What is causing this to not work? (Tried adding the breaks to see if I was just going crazy because of the speed of the scroll.)
Code Below:
HTML
<button onclick="topFunction()" id="topBtn" title="Go to top">Top</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="header-row">
<div class="header-left">
<h4>A Self-Taught Programmer's Adventure</h4>
<h3>Victor Rojas</h3>
</div>
<div class="header-center">
<img class="logo-main" src="https://victoryroads.files.wordpress.com/2017/05/cropped-artboard-1.png" title="Victory Roads">
</div>
<div class="header-right">
<h4 class="text-social">Connect with me:</h4>
<a href="https://www.facebook.com/spikefrs/" class="fa fa-facebook" target="_blank">
</a>
<a href="https://www.instagram.com/spikefrs/" class="fa fa-instagram">
</a>
<a href="https://www.linkedin.com/in/victorvanrojas/" class="fa fa-linkedin">
</a>
</div>
</div>
<div class="header-right-nav" id="topnav">
Portfolio
Accomplishments
<a class="active" href="#home">Home</a>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="main-body">
<p class="header-title" id="accomplishments">Accomplishments</p>
<div class="row">
<div class="column">
<p class="subheader-title">Projects</p>
<ul>
<p class="project"><a class ="link" href="https://codepen.io/c0nnexi0n/full/oGrowR/">Tribute Page</a></p><br>
<p class="project"><a class ="link" href="https://victoryroads.club/">Personal Blog</a></p>
</ul>
</div>
<div class="column">
<p class="subheader-title">Certificates</p>
<ul>
<p class="project"><a class ="link" href="https://www.coursera.org/account/accomplishments/certificate/8FGMKKQ5VN">Python Certification</a></p><br>
<p class="project"><a class ="link" href="https://www.udemy.com/certificate/UC-MVB4P9MJ/">Marketo Certification</a></p>
</ul>
</div>
</div>
<div class="row">
<p class="header-title" id="portfolio">My Portfolio</p>
<img class="port1" src="https://i.imgur.com/6aLPprT.png"></img>
<img class="port2" src="https://i.imgur.com/A8tOXw3.png"></img>
</div>
</div>
CSS
$black: #000;
$grey: #868686;
$white: #FFF;
$red: #dd4b4b;
.header-row{
position: relative;
background-color: $grey;
width: 100%;
height: 150px;
padding: 40px;
}
.header-left{
position: relative;
overflow: auto;
}
.header-center{
position: relative;
text-align: center;
height: 60px;
top: -70px;
}
.header-right{
position: relative;
text-align: right;
top: -145px;
}
.text-social{
position: relative;
left: -125px;
top: 30px;
text-decoration: underline;
}
.fa {
font-size: 30px;
width: 30px;
text-align: right;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
color: $black;
}
.fa:hover{
opacity: 20%;
color: $red;
text-decoration: none;
text-shadow: 1px 2px 3px $black;
}
.header-title{
text-align: center;
padding: 20px;
color: $white;
font-weight: 500;
font-size: 40px;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
.subheader-title{
text-align: center;
padding: 20px;
color: $white;
font-weight: 500;
font-size: 30px;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
.logo-main{
height: 60px;
top: -200px;
}
.header-right-nav {
background-color: #333;
overflow: hidden;
}
.header-right-nav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family: arial, san-serif;
}
.header-right-nav a:hover {
background-color: #ddd;
color: black;
}
.header-right-nav a.active {
background-color: $red;
color: white;
}
.main-body {
position: relative;
background-color: $grey;
color: $black;
width: auto;
height: 100%;
}
.row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
text-align: center;
}
.column {
position: relative;
display: table-cell;
background-color: $red;
height: 20vh;
column-count: 1;
column-gap: 2em;
left: 15px;
border-radius: 25px;
}
.project {
position: relative;
left: -20px;
font-size: 25px;
}
.link {
color: $white;
}
.link:hover {
color: $black;
text-decoration: underline;
}
.port1{
position: relative;
height: 300px;
width: 600px;
margin: 28px;
}
.port2{
position: relative;
height: 300px;
width: 600px;
}
#topBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#topBtn:hover {
background-color: #555;
}
Javascript
document.getElementsByTagName("h1")[0].style.fontSize = "80px";
document.getElementsByTagName("h3")[0].style.fontSize = "25px";
document.getElementsByTagName("h4")[0].style.fontSize = "15px";
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});

HTML/CSS Jquery hover not showing up

I am new to Jquery and
I am trying to make a dropdown on my navigation using simple Jquery hover effect, and I think I am using wrong selector on Jquery.
I would like to see the dropdown and be able to navigate when i hover over 'What's New'
Any help would be awesome. Thanks,
See ATTACHED IMG
$(document).ready(function () {
$("li .nav-level-1").hover(
function () {
$('.nav-level-2').slideDown('200');
},
function () {
$('.nav-level-2').slideUp('200');
}
);
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

You should use a nested ul for your dropdown menu. You don't need jQuery at all for this. It can all be done with CSS. Take a look at this simple hover effect under the Products tab.
Codepen
HTML
<header class="navbar">
<div class="container">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Cars
<ul>
<li>Ford</li>
<li>Chevy</li>
<li>Toyota</li>
</ul>
</li>
<li>Trucks</li>
<li>Vans</li>
<li>SUVs</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</header>
CSS
header {
width: 100%;
height: 50px;
margin: 0;
padding: 0;
background-color: #2EBAE8;
}
.container {
width: 100%;
max-width: 1040px;
margin: 0 auto;
}
ul {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
width: 200px;
background-color: #046382;
display: none;
position: absolute;
top: 100%;
left: 0;
float: none;
}
ul ul ul {
top: 0;
left: 100%;
}
ul ul li {
float: none;
}
ul li {
float: left;
padding: 0 10px;
position: relative;
}
ul li:hover > ul {
display: block;
}
ul a {
display: block;
text-decoration: none;
color: white;
line-height: 50px;
transition: color 0.5s;
}
ul a:hover {
color: #E82E82;
}

Your submenu is hidden with visibility: hidden style.
I also separated the handled so that the menu doesn't hide while you're hovering it, and added finish() so that we're not queueing animations.
But yeah, like ncox85 said you should do this with css.
$(document).ready(function () {
$('.nav-level-2').hide();
$("li .nav-level-1").mouseenter(
function () {
$('.nav-level-2').finish().slideDown('200');
}
);
$("li .nav-level-2").mouseleave(
function () {
$('.nav-level-2').finish().slideUp('200');
});
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

Just use display:none instead of visibility:hidden on class .nav-level-2

If any of you are wondering, I got a good result from just using html/css, got rid of jquery.
Maybe I will use jquery another time. fun lesson for myself and those of you out there. Thanks guys
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display: block;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

How do i do this with hover effect with javascript/jquery?

So i am slightly new to JS and jQuery, but i know html and css very well. I want to know if this is possible to do.
I have some HTML code for a nav in an info area. I have it all set up and I have it so it calls a function on mouseover, this function turns the color of the link to white. And for mouseout it turns it black again. Now I know you can probably do this with css but I need the practice for Js/jQuery. I wrote some code and it works and all but instead it colors all the colors white and it blends in, test the code and you will see. Is there a way to only choose the selected button and color only that one. maybe with an array or something?? I dont really need to know if there is a way to do it with css, i just need to get into the habit of using js/jQuery.
Code:
function colorLink() {
$(".infoNav nav ul li a").css("color", "white");
}
function colorLinkOut() {
$(".infoNav nav ul li a").css("color", "black");
}
* {
margin: 0px;
padding: 0px;
}
.header-wrap {
position: fixed;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
}
body {
background: #CCC;
width: 70%;
margin-left: 20%;
margin-top: 0px;
height: 900px;
}
.mainHeader {
padding: 0;
background: #666;
height: 36px;
width: 100%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
box-shadow: 10px 10px 10px #767373;
}
.mainHeader nav ul li {
display: inline-block;
list-style: none;
margin: 10px 0px 0px -30px;
margin-left: 15px;
position: relative;
top: -128px;
left: 10px;
}
.mainHeader nav ul li a {
text-decoration: none;
border-radius: 3px;
color: white;
padding: 7px 20px 10px 20px;
margin-right: -15px;
font-family: 'Eras ITC';
}
.mainHeader nav ul li a:hover {
background: #f18529;
}
.mainHeader nav ul .active {
background: #f18529;
}
.mainInfo {
background: white;
height: 500px;
width: 100%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272;
}
.mainInfo .miInfo p {
font-family: Arial;
padding: 10px 10px 10px 10px;
text-align: left;
}
.mainHeader .logoArea p {
position: relative;
top: -100px;
}
.mainHeader .logoArea img {
position: relative;
top: -130px;
left: 130px;
}
.infoNav nav ul li {
list-style: none;
border: 2px solid black;
padding: 30px;
border-radius: 20px;
width: 140px;
text-align: center;
margin-top: 30px;
position: relative;
left: 35%;
}
.infoNav nav ul li:hover {
background: #f18529;
color: white;
}
.infoNav nav ul li a {
text-decoration: none;
color: black;
font-family: Broadway;
font-size: 30px;
}
#media only screen and (min-width: 150px) and (max-width: 600px) {
body {
width: 100%;
}
.mainHeader {
padding: 0;
background: #666;
height: 70px;
width: 80%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
list-style-type: none;
}
.mainHeader nav ul li {
text-align: center;
height: 100%;
word-break: break-all;
}
.mainHeader nav ul li a {
width: 100%;
height: 20px;
padding: 10px 5px;
display: inline-block;
margin: 10px;
}
.mainInfo {
background: white;
height: 300px;
width: 80%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272;
}
.mainInfo .miInfo {}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="Script.js"></script>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<meta charset="utf-8" />
<title>Website</title>
</head>
<body class="body">
<header class="mainHeader">
<div class="logoArea">
<img alt="logo" src="logo.jpg" width="250px" height="120px">
</div>
<nav>
<ul>
<li><a class="active" href="Index.html">Home<br/></a>
</li>
<li>About<br/>
</li>
<li>Random
</li>
</ul>
</nav>
</header>
</div>
<div class="mainInfo">
<div class="miInfo">
<p>Please choose one of the catagories below:)</p>
<div class="infoNav">
<nav>
<ul>
<li onmouseover="colorLink()" onmouseout="colorLinkOut()">Home<br/>
</li>
<li onmouseover="colorLink()" onmouseout="colorLinkOut()">About<br/>
</li>
<li onmouseover="colorLink()" onmouseout="colorLinkOut()">Random
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>

Use hover
function colorLink(){
$(this).find("a").css("color", "red");
}
function colorLinkOut(){
$(this).find("a").css("color", "green");
}
$('.infoNav nav li').hover(colorLink, colorLinkOut);
*{margin: 0px;
padding: 0px;}
.header-wrap{
position: fixed;
}
.fixed{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
}
body{
background:#CCC;
width: 70%;
margin-left: 20%;
margin-top: 0px;
height: 900px;
}
.mainHeader{
padding: 0;
background:#666;
height:36px;
width:100%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
box-shadow: 10px 10px 10px #767373;
}
.mainHeader nav ul li{
display:inline-block;
list-style:none;
margin: 10px 0px 0px -30px;
margin-left: 15px;
position: relative;
top: -128px;
left: 10px;
}
.mainHeader nav ul li a{
text-decoration: none;
border-radius: 3px;
color: white;
padding: 7px 20px 10px 20px;
margin-right: -15px;
font-family: 'Eras ITC';
}
.mainHeader nav ul li a:hover{
background: #f18529;
}
.mainHeader nav ul .active {
background: #f18529;
}
.mainInfo{
background:white;
height: 500px;
width: 100%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272 ;
}
.mainInfo .miInfo p{
font-family: Arial;
padding: 10px 10px 10px 10px;
text-align: left;
}
.mainHeader .logoArea p{
position: relative;
top: -100px;
}
.mainHeader .logoArea img{
position: relative;
top: -130px;
left: 130px;
}
.infoNav nav ul li{
list-style: none;
border: 2px solid black;
padding: 30px;
border-radius: 20px;
width: 140px;
text-align: center;
margin-top: 30px;
position: relative;
left: 35%;
}
.infoNav nav ul li:hover{
background: #f18529;
color: white;
}
.infoNav nav ul li a{
text-decoration: none;
color: black;
font-family: Broadway;
font-size:30px;
}
#media only screen and (min-width: 150px) and (max-width: 600px) {
body{
width: 100%;
}
.mainHeader{
padding: 0;
background:#666;
height:70px;
width:80%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
list-style-type: none;
}
.mainHeader nav ul li{
text-align: center;
height: 100%;
word-break: break-all;
}
.mainHeader nav ul li a{
width: 100%;
height: 20px;
padding: 10px 5px;
display: inline-block;
margin: 10px;
}
.mainInfo{
background:white;
height: 300px;
width:80%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272;
}
.mainInfo .miInfo{
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="body">
<header class="mainHeader">
<div class="logoArea">
<img alt="logo" src="logo.jpg" width="250px" height="120px">
</div>
<nav><ul>
<li><a class="active" href="Index.html">Home<br/></a></li>
<li>About<br/></li>
<li>Random</li>
</ul></nav>
</header>
</div>
<div class="mainInfo">
<div class="miInfo">
<p>Please choose one of the catagories below:)</p>
<div class="infoNav">
<nav><ul>
<li>Home<br/></li>
<li>About<br/></li>
<li>Random</li>
</ul></nav>
</div>
</div>
</div>
</body>

Yes there is a way, but if you are using jQuery you'd be better hooking to the events in a jQuery way, so remove those onmouseover="colorLink()" and onmouseout="colorLinkOut()" from the html and replace your javascript for
$(function(){
$(".infoNav li").mouseover(function(){
$(this).find("a").css("color", "white");
});
$(".infoNav li").mouseout(function(){
$(this).find("a").css("color", "black");
});
});
by hooking through jQuery instead of plain javascript you can now use the "this" keyword as a reference to the element that generated the event, that's why $(this) works here, but would not work your previous code.
http://jsfiddle.net/mtd4ouj3/3/

convert css code from :hover to click

i have a problem :
there is in code , popup opens and close when the mouse hovers over the image, I want it to open and close when i press on the image .
photo on this code:
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.gif" style="width: 21px;" />
<span id="mes">$count</span>
</a>
the full code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<style type="text/css">
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
#menu {
position: relative;
margin-left: auto;
top: -34px;
}
#menu ul {
list-style-type: none;
}
#menu li {
float: left;
position: relative;
text-align: center;
}
#menu ul.sub-menu {
position: absolute;
left: -10px;
z-index: 90;
display: none;
}
#menu ul.sub-menu li {
text-align: right;
}
#menu li:hover ul.sub-menu {
display: block;
}
.egg {
padding: 10px;
margin: 5px 5px 5px 5px;
position: relative;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
background-color: #fff;
border-radius: 3px 3px 3px 3px;
border: 1px solid rgba(100, 100, 100, 0.4);
}
.egg_Body {
border-top: 1px solid #D1D8E7;
color: #808080;
}
.egg_Message {
font-size: 13px !important;
font-weight: normal;
overflow: hidden;
}
h3 {
font-size: 13px;
color: #333;
margin: 0;
padding: 0;
}
.comment_ui {
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
padding: 6px 4px 3px 6px;
width: 331px;
cursor: pointer;
white-space: pre-line;
}
.comment_ui:hover {
background-color: #F7F7F7;
}
.comment_actual_text img {
margin: 0px 0px 0px 7px;
}
.dddd {
background-color: #f2f2f2;
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
margin-bottom: 2px;
padding: 6px 4px 3px 6px;
width: 331px;
}
.comment_text {
border-radius: 2px 2px 2px 2px;
padding: 2px 0 4px;
color: #333333;
}
.comment_actual_text {
display: inline;
padding-left: .4em;
}
ol {
list-style: none;
margin: 0 auto;
width: 500px;
margin-top: 20px;
}
#mes {
padding: 0px 3px;
border-radius: 3px 3px 3px 3px;
background-color: rgb(240, 61, 37);
background-color: #FF00CC;
font-size: 9px;
font-weight: bold;
color: #fff;
position: absolute;
top: 5px;
left: 73px;
}
.toppointer {
background-image: url(alert/top.png);
background-position: -82px 0;
background-repeat: no-repeat;
height: 11px;
position: absolute;
top: -11px;
width: 20px;
right: 276px;
}
.clean {
display: none
}
.textlink {
display: block;
width: 140px;
}
</style>
<span id="menu">
<ul>
<li>
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.png" style="width: 21px;" />
<span id="mes">$count</span>
</a>
<ul class="sub-menu">
<li class="egg">
<div class="toppointer">
<img src="alert/top.png" />
</div>
<div id="view_comments"></div>
$all
<if condition="$count_all > 0 ">
<div class="bbbbbbb" id="view">
<div style="background-color: #F7F7F7; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; position: relative; z-index: 100; padding:8px; cursor:pointer;">
view all
</div>
</div>
</if>
</li>
</ul>
</li>
</ul>
</span>
Thank you very much !

Instead of the :hover pseudo-class, use the :active pseudo-class.
So the CSS block would look like this:
a:active {
color: black;
}
For more info, take a look at this: https://developer.mozilla.org/en-US/docs/Web/CSS/:active

Toggle with only CSS is a little bit tricky, but here is one way of doing it:
Demo: http://jsfiddle.net/DerekL/R5Bm5/
<input id="control" type="checkbox">
<label for="control"><span id="toggle">Toggle</span></label>
<div class="more">Here's more</div>
.more{
height: 0px;
overflow: hidden;
}
#control:checked ~ .more{
/*Do whatever you want here*/
height: 20px;
}
#control{
display: none;
}
#toggle{
color: blue;
text-decoration: underline;
cursor: pointer;
}
Of course, you can always toggle with JavaScript:
$("#toggle").click(function(){
$(".more").toggle();
});
A better demo according to your description: http://jsfiddle.net/DerekL/R5Bm5/2/