How do i make a dynamic header resize itself? - javascript

I want to make header that resizes itself based on the size of the users screen. So far i have an image on the left and a menu on the right. i want the menu's margin from the right to get smaller until a point where the image begins to get smaller and then if it gets even smaller the menu goes bellow the image.
Here is the HTML code:
<body>
<script type="text/javascript" src="script.js"></script>
<script src="jquery1.js"></script>
<div id="wrapper">
<!-- Header -->
<div id="header">
<!-- Logo -->
<div id="header_logo"></div>
<!-- Navigation Bar -->
<ul class="navbar">
<li>Home
<li>#
<li>#
<li>#
<li>#
</ul>
</div>
Here is the CSS code:
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#header {
float: left;
width: 100%;
height: 250px;
border: none;
}
#header_logo {
background: url("images/logo.png")no-repeat;
float: left;
width: 300px;
height: 135px;
margin: 50px 0px 0px 50px;
}
.navbar {
float: right;
margin-top: 125px;
margin-right: 100px;
width: 600px;
}
.navbar li {
float: left;
list-style-type: none;
}
.navbar li a {
padding: 6px 20px;
text-decoration: none;
border-right: 1px solid #0040FF;
color: #0040FF;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.navbar li a:hover{
color: #000000;
background-color:#0040FF;
}
Thank you i would be grateful for any help.

Then I would suggest to either keep the horizontal things in percentage or use css media queries.
percentage example is here:
HTML:
<div id="wrapper">
<!-- Header -->
<div id="header">
<!-- Logo -->
<img src="images/logo.png" />
<!-- Navigation Bar -->
<ul class="navbar">
<li>Home</li>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
</ul>
</div>
</div>
CSS:
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#header {
height: 250px;
}
#header_logo {
float: left;
width: 20%;
margin: 50px 0 0 5%;
}
#header_logo img{width:100%;}
.navbar {
float: right;
margin-top: 125px;
margin-right: 5%;
text-align:right;
width: 60%;
}
.navbar li {
display:inline-block;
list-style-type: none;
}
.navbar li a {
display:block;
padding: 6px 20px;
text-decoration: none;
border-right: 1px solid #0040FF;
color: #0040FF;
font:bold 15px 'Open Sans', sans-serif;
}
.navbar li a:hover{
color: #000;
background-color:#0040FF;
}
Jsfiddle: http://jsfiddle.net/ashishanexpert/kvg4F/
Good luck!

Related

Hamburger menu not functioning

I've gotten sort of close with this hamburger menu but it's still not functioning. Any help would be great. (I'm sure it's obvious but forest for the trees and all that.) To a newb, it seems like my js isn't functioning/triggering/whatever the correct word is. Perhaps I linked it wrong?
<!DOCTYPE html>
<title>Bad Doc</title>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('.menu-btn').click(function(){
$('.responsive-menu').toggleClass('expand')
})
</script>
<style>
.clearfix:after {
content: "";
display: table;
clear: both;
}
.body {
margin: 0;
padding: 0;
}
a:hover {
background-color: #D3D3D3;
}
a:link {
text-decoration: none;
}
p {
font-family: "Garamond", Times, serif;
}
.wrapper {
border: 1px solid blue;
padding: 1px;
background-color: gray;
}
.main-nav {
border: 1px solid blue;
float: left;
margin: 0 5px 0 0;
}
.content {
border: 1px solid blue;
overflow: auto;
}
h1 {
font-size: 72px;
text-align: center;
margin: 0 0 20px 0;
font-family: "Garamond", Times, serif;
}
ul {
margin-right: 10px;
padding: 0 20px 0 20px;
}
li {
list-style-type:none;
font-family: "Garamond", Times, serif;
font-size: 14px;
}
.photos {
text-align: center;
}
img {
max-width: 30%;
height: auto;
opacity: 0.7;
filter: alpha(opacity=70);
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
#footer p {
text-align: center;
font-size: 14px;
border: 1px solid blue;
margin: 3px 0 0 0;
padding: 3px;
background-color: gray;
}
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
img {max-width: 70%; padding-bottom: 10px;
}
h1 {
font-size: 30px;
}
.content {
background-color: black;
padding-right: 0;
margin-left: 60px;
margin-right: 60px;
}
.menu-btn div{
float: left;
padding-right: 8px;
margin-top: 1em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 25px;
height: 4px;
margin-bottom: 5px;
background: rgb(0,0,0);
z-index: 99;
}
.responsive-menu{
display: none;
overflow: hidden;
}
.responsive-menu ul {
margin: 0;
padding: 0;
width: 100px;
float: left;
}
.responsive-menu li {
margin: 0;
padding: 0;
list-style-type: none;
}
.expand {
display: block !important;
}
<!-- nav ends here-->
</style>
</head>
<body>
<!-- added clearfix here with style at top of style list-->
<div class="wrapper clearfix">
<h1>gage</h1>
<!-- this is nav-->
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
<div class="main-nav responsive-menu">
<ul>
<li>about</li>
<li>contact</li>
</ul>
</div>
</div>
<!-- this is main body of page -->
<div class="content">
<div class="photos">
<img src="25612060593_b222234b86_b.jpg">
<img src="25612060593_b222234b86_b.jpg">
<img src="25612060593_b222234b86_b.jpg">
<img src="25612060593_b222234b86_b.jpg">
<img src="25612060593_b222234b86_b.jpg">
<img src="25612060593_b222234b86_b.jpg">
</div>
</div>
<!-- this is footer (inside or outside last div???) -->
</div>
<div id="footer">
<p>More stuff</p>
</div>
</body>
</html>
The better option is to move your scripts to the end of the body tag.
If you can't, you need to wrap this code:
$('.menu-btn').click(function(){
$('.responsive-menu').toggleClass('expand')
})
With $(document).ready
Like this:
$(document).ready(function() {
$('.menu-btn').click(function() {
$('.responsive-menu').toggleClass('expand')
})
});
http://jsbin.com/gelode/edit?html,js

Expanding menu shifts to the right after slideToggle()

I created a mobile menu and for some reason whenever you expand the menu, the list items shift the right a bit and the border-bottom does not cover the entire width of the expanded menu.
To see the mobile part of the menu, shrink the screen down some. Once you click the menu icon, you will see that the list doesn't just go straight down, it looks to move to the right. Then the border issue is very easy to see.
See snippet to view the issue.
$('span.nav-btn').click(function () {
$('ul.nav_list').slideToggle(500);
})
$(window).resize(function (){
if ( $(window).width() > 600 ) {
$('ul.nav_list').removeAttr('style');
}
});
body {
padding: 0;
margin: 0;
font-family:
}
.header {
margin: 0;
background-color: #333;
height: 80px;
}
.header_wrap {
margin: 0 15%;
}
.logo {
color: #FFF;
font-size: 1.2em;
padding-top: 25px;
position: absolute;
}
.nav_list {
text-decoration: none;
background-color: #333;
color: #FFF;
margin: 0;
list-style: none;
text-align: right;
}
.nav_list > li {
display: inline-block;
padding: 25px 15px;
}
.nav_list > li > a {
text-decoration: none;
font-size: 1.2em;
color: #FFF;
}
#media screen and (max-width:640px) {
body {
background-color: blue;
}
.header_wrap {
margin: 0 5%;
}
.nav_list {
text-align: center;
display: none;
margin-top: 60px;
}
.nav_list > li {
display: block;
border-bottom: 1px solid #FFF;
}
.nav-btn {
display: block;
background-color: #333;
color: #FFF;
font-size: 1.5em;
text-align: right;
cursor: pointer;
padding-top: 20px;
}
.nav-btn:before {
background-image: url('http://realtorcatch.com/icons/mobile_menu_bttn.png');
background-size: 28px 28px;
background-repeat: no-repeat;
width: 28px;
height: 28px;
content:"";
display: block;
float: right;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<header class="header">
<div class="header_wrap">
<div class="logo">Garbrandt Construction</div>
<nav>
<span class="nav-btn"></span>
<ul class="nav_list">
<li>Services</li>
<li>About us</li>
<li>Pricing</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
Try adding the last line to your nav_list (padding-left:0 is needed):
.nav_list {
text-align: center;
display: none;
margin-top: 60px;
padding-left:0;
}
JS Fiddle
You should add a padding of 0 to the ul element. Padding: 0 or padding-left: 0 should do it.
.nav_list {
padding: 0;
}
Lists automatically have padding to the left;

jQuery .slideToggle() not working

I am trying to build a mobile friendly navigation for my website and I want to use a menu that slides down after pressing the menu link. I thought it would be pretty simple but it isn't working. When I click the link "Menu" nothing happens. It should reveal a menu using the .slideToggle feature of jQuery. If you could offer a fix or an alternative method to making a responsive and mobile friendly menu.
<script>
$(document).ready(function(){
$("#burger").click(function(){
$("#menu").slideToggle();
});
});
</script>
<!-- END OF SCRIPTS -->
<!-- HEADER -->
<header>
<div id="top">
<img src="root/logo.png">
<div id="burger">
<a>Menu</a>
</div>
</div>
<nav id="navbar">
<ul id="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</nav>
</header>
<!-- END HEADER -->
</body>
</head>
This is my CSS:
/* HEADER */
header {
width: 100%;
background-color: #012d5a;
height: 150px;
}
#top {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#top img{
height: 110px;
margin-left: 0px;
}
#navbar {
width: 100%;
height: 40px;
background-color: #B9E0F6;
display: block;
color: #000;
font-family: helvetica;
font-size: 16px;
font-weight: 600;
}
#menu {
display: block;
width: 600px;
margin: auto;
height: 40px;
}
#menu li {
float: left;
width: 120px;
display: inline;
padding-top: 10px;
height: 40px;
border-right: 2px solid #000;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
text-align: center;
}
#menu li:last-child {
border-right: 0;
}
#burger {
display: none;
float: right;
}
/* Responsive Menu */
#media only screen and (max-device-width: 767px) {
/* define mobile specific styles here */
#burger {
display: block;
}
#navbar {
height: auto;
position: relative;
z-index: 1;
}
#menu {
display: none;
height: 200px;
width: 100%;
}
#menu li {
display: block;
float: none;
width: 50%;
border: none;
margin: auto;
}
#top {
width: 100%;
}
}
Your menu is hidden in the CSS, try this instead:
$("#burger").click(function(){
$("#navbar").slideToggle();
});
/* HEADER */
header {
width: 100%;
background-color: #012d5a;
height: 150px;
}
#top {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#top img{
height: 110px;
margin-left: 0px;
}
#navbar {
width: 100%;
height: 40px;
background-color: #B9E0F6;
display: block;
color: #000;
font-family: helvetica;
font-size: 16px;
font-weight: 600;
}
#menu {
display: block;
width: 600px;
margin: auto;
height: 40px;
}
#menu li {
float: left;
width: 120px;
display: inline;
padding-top: 10px;
height: 40px;
border-right: 2px solid #000;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
text-align: center;
}
#menu li:last-child {
border-right: 0;
}
#burger {
float: right;
color: #B9E0F6;
margin-top: 24px;
font-size: 24px;
cursor: pointer;
text-decoration: underline;
}
/* Responsive Menu */
#media only screen and (max-device-width: 767px) {
/* define mobile specific styles here */
#burger {
display: inline-block;
}
#navbar {
height: auto;
position: relative;
z-index: 1;
}
#menu {
display: none;
height: 200px;
width: 100%;
}
#menu li {
display: block;
float: none;
width: 50%;
border: none;
margin: auto;
}
#top {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<!-- Scripts Here -->
<script type = "text/javascript" src="script/jquery-2.1.4.min.js"></script>
<script type = "text/javascript" src="script/bootstrap.min.js"></script>
<!-- END OF SCRIPTS -->
<!-- HEADER -->
<header>
<div id="top">
<div style="display:inline-block">
<img src="http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png" />
</div>
<div id="burger">
<a>Menu</a>
</div>
</div>
<nav id="navbar">
<ul id="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</nav>
</header>
<!-- END HEADER -->

How can I get rid of Dots from <ul> in <nav> [duplicate]

This question already has answers here:
how to hide <li> bullets in navigation menu and footer links BUT show them for listing items
(7 answers)
Closed 7 years ago.
This is what my website looks like in Firefox (notice the dots).
This is how it looks in Chrome (No Dots).
Is there a way that I can get the dots to go away?
Here is my code:
function changeText(button) {
button.innerHTML = 'Get Started';
}
.bcafrees {
text-align: center;
font-family:'Roboto', sans-serif;
color: #FFFFFF;
text-align: center;
font-size: 60px;
margin-bottom: 1%;
text-shadow: 1px 1px #000000;
}
nav.header {
margin: 0;
background-color: #66C2FF;
}
nav ul {
width: 100%;
margin: 0;
padding: 0;
height: 4%
}
nav ul li {
width: 4%;
float: left;
margin: 0% 1% 2% 2%;
vertical-align: middle;
text-align: center;
align-items: center;
height: 10px;
margin-top: 0%;
padding-top: 0%;
}
nav ul li a {
display: block;
width: 100%;
text-align: center;
color: #FFFFFF;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-size: 22px;
vertical-align: middle;
}
nav ul li a:hover {
color: #859999;
}
body {
background-color: #3A75B0;
width: 100%;
max-width: 1000000px;
margin: 0 auto !important;
}
body p {
color: #FFFFFF;
text-align: center;
font-family: 'Raleway', sans-serif;
font-size:50px;
padding-top: 10px;
padding-bottom: 5px;
margin: 0;
border: 0;
}
.getStarted {
display: table;
margin: 0 auto !important;
height: 170px;
width: 300px;
background: transparent;
text-decoration: none;
border-style: solid;
border-color: #FFFFFF;
font-family: Helvetica;
text-align: center;
color: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 60px;
padding: 20px 10px 50px 10px;
margin-bottom: 50px;
font-family: 'Raleway', sans-serif;
}
.getStarted a {
text-decoration: none;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #FFFFFF;
font-size: 60px;
margin-bottom: 50px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
footer {
clear: both
color: #FFFFFF;
font-family: TW Cen MT;
padding-top: 5.06%;
position: relative;
}
footer ul {
width: 100%;
list-style: none;
margin-left: auto;
margin-right: auto;
padding: 0;
overflow: hidden;
text-align: center;
display: block;
color: #FFFFFF;
text-decoration: none;
font-family: TW Cen MT;
}
footer div {
background-color: #66C2FF;
height: 100px;
text-decoration: none;
}
.timmy:hover {
color: #3A75B0;
}
.katie:hover {
color: #3A75B0;
}
.katie {
display: table;
margin-left: auto;
margin-right: auto;
width: 70px;
}
.timmy {
display: table;
margin-left: auto;
margin-right: auto;
width: 95px;
}
footer div ul a{
width: 100px;
}
hr {
margin-top: 10px;
color: #FFFFFF;
width: 70%;
}
.getStartedButton:hover {
color: #3A75B0;
background-color: #FFFFFF;
}
.getStartedButton {
width: 300px;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
.getStartedButton a:hover {
color: #3A75B0;
}
.getStarted:hover {
color: #3A75B0;
}
.getStartedButton.getStarted:hover {
color: #3A75B0;
}
<html lang="en">
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="welcome.css"/>
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="Welcome.js"></script>
<title>BCA Frees</title>
</head>
<body>
<header>
<div class="bcafrees">
BCA Frees
</div>
<nav class="header">
<ul>
<li></li>
<li></li>
<li class="home">Home</li>
<li></li>
<li></li>
<li class="about">About</li>
<li></li>
<li></li>
<li class="faqs">FAQs</li>
<li></li>
<li></li>
<li class="credits">Credits</li>
<li></li>
<li></li>
</ul>
</nav>
</header>
<div id="wrapper">
<div class="p">
<p>Find Your Friends</p>
<p>During Your Frees</p>
<hr />
<br />
</div>
<div class="getStartedButton">
<a href ="/signup">
<button onmouseover="changeText(this)" class="getStarted">
Get Started
</button>
</a>
</div>
</div>
<footer>
<div id="footer">
<ul>
<li>Copyright BCA Frees 2014</li>
<hr class="hr" />
<li>Created By:</li>
<li class="timmy">Timothy Obiso</li>
<li class="katie">Katie Katz</li>
</ul>
</div>
</footer>
</body>
</html>
Add a list-style: none; in the nav ul li selector:
nav ul li {
list-style: none;
width: 4%;
float: left;
margin: 0% 1% 2% 2%;
vertical-align: middle;
text-align: center;
align-items: center;
height: 10px;
margin-top: 0%;
padding-top: 0%;
}
To remove the bullets, or numbers, from a list you can use list-style: none;. It's also worth noting that you may want to remove the default padding that's automatically created for the list.
HTML
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<ol>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ol>
CSS
ol, ul {
list-style: none;
padding: 0; /* Optional to remove default padding */
}
An example can be seen on jsFiddle: http://jsfiddle.net/jamesjefferyUK/p26afsp1/1/

How to highlight anchor link when target div comes in view in jQuery?

I have a webpage like the following layout;
The HTML is;
<div class="header" style="text-align: center">Demo</div>
<div class="navi">
<div class="title">
Options
</div>
</div>
<div class="content">
<div class="da">
diva
divb
divc
divd
</div>
<div class="db">
<div style="width: 300px; height: 300px; background-color: #996633"><a id="diva" name="diva">DIV1</a></div>
<div style="width: 300px; height: 300px; background-color: #CC0066"><a id="divb" name="divb">DIV2</a></div>
<div style="width: 300px; height: 300px; background-color: #3300FF"><a id="divc" name="divc">DIV3</a></div>
<div style="width: 300px; height: 300px; background-color: #99CC00"><a id="divd" name="divd">DIV4</a></div>
</div>
</div>
<div class="footer"> </div>
and CSS is;
html, body, div, h2, img, ul, li, form, time {
margin: 0;
padding: 0;
border: 0;
}
html, body {
position: absolute;
height: 100%;
width: 100%;
min-width: 800px;
}
.header{
height: 40px;
color: #FFF;
background-color: #666666;
}
.title{
display: block;
float: left;
margin-top: 4px;
margin-left: 10px;
}
.content{
margin-bottom: 36px;
}
.footer{
height: 30px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
border-top: solid 1px #CCCCCC;
background: #FFFFFF;
}
.da,.db{
position: absolute;
z-index: 0;
top: 82px;
bottom: 30px;
}
.da{
width: 200px;
border-right: solid 1px #CCCCCC;
overflow: visible !important;
}
.da a{
font-family: Tahoma;
display: block;
padding: 10px;
text-decoration: none;
color: #555;
}
.da a:hover{
background-color: #DDD;
}
.da .current,.da .current:hover{
background-color: #FF6600;
}
.db{
left: 200px;
right: 0;
background-color: #CC99FF;
overflow: scroll;
overflow-x:hidden;
}
The links of sidebar are anchored to 4 cascaded divs. They are linked to divs and when I click on links, the corresponding div will scroll up. This worked fine. But I tried to achieve something different. The link of current visible div may be given orange background color, so that when user scrolls the page, the orange color will shift from one link to another, according to the current div on page. After some googling and research, I found this SO question useful jQuery changing css on navigation when div # scrolls into view. A demo of the solution is available in this fiddle which is exactly what I want.
But when I tried to implement this solution in my layout, it is not working, ie, links are not highlighting to corresponding div.
Here is my fiddle.
How can I implement the same in my layout?
Try this:
CSS:
.da,.db{
position: relative; // changed to relative. Because of absolute your document height is affected.
z-index: 0;
top: 82px;
bottom: 30px;
}
.db{
left: 142px;
top:42px;
right: 0;
background-color: #CC99FF;
overflow: scroll;
overflow-x:hidden;
}
jQuery:
$('.da a').removeClass('current').eq(i).addClass('current'); // replaced selected with current which you are using.
DEMO
I couldn't wrap my head around some of these answers, but I found this really simple idea.
It's basically saying that the mouse will be in view at some position on the screen, and if it is within a specific div, highlight the matching link.
HTML
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="nav">
<span id ="menu">☰</span>
<ul id="top-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</div>
<div id="wrapper">
<div id="one" class="container">
one
</div>
<div id="two" class="container">
two
</div>
<div id="three" class="container">
three
</div>
<div id="four" class="container">
four
</div>
<div id="five" class="container">
five
</div>
<div id="six" class="container">
six
</div>
</div>
CSS
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: Geneva, Tahoma, Verdana, sans-serif;
margin: 0px;
}
.nav{
width: 100%;
height: 50px;
background: rgba(200,200,200,0.2);
position: fixed;
top: 0px;
}
#menu{
float: right;
font-size: 40px;
font-weight: normal;
padding-right: 20px;
color: rgba(100,100,100,0.9);;
}
.nav ul{
width: 150px;
list-style-type: none;
background: rgba(200,200,200,0.2);
border-radius: 5px;
}
#top-menu{
clear: both;
display: block;
float: right;
padding-left: 0px;
margin-top: 10px;
margin-right: 20px;
}
.links{
color: black;
font-size: 20px;
font-weight: normal;
}
.nav ul li a{
text-decoration: none;
text-align: center;
display: block;
padding: 2px 0px 2px 10px;
}
.nav ul li a:hover{
color: #fff;
background-color: black;
border-left: thick solid red;
}
#wrapper{
margin-top: 50px;
}
.container{
width: 800px;
height: 600px;
margin: 0px auto;
background: rgba(200,200,200,0.2);
border-bottom: 1px solid rgba(200,200,200,1);
padding: 20px;
}
.active{
color: white;
background-color: rgba(100,100,100,1);
border-left: thick solid rgba(0,255,0,0.5);
}
jQuery
$(document).ready(function(){
$("div").mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('active');
$("[href=#"+id+"]").addClass('active');
});
});
Source

Categories