Responsive menu doesn't close even after browser resize - javascript

Here's my code:
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Responsive Menu</title>
<link rel="stylesheet" href="css/colors.css"/>
<link rel="stylesheet" href="css/font-awesome.css"/>
</head>
<body>
<header id="topbar">
<p>Some title</p>
<nav class="menu">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact Me</li>
</ul>
</nav>
<div class="nav-trigger">
<span><i class="fa fa-bars fa-2x"></i></span>
</div>
<nav class="mobile-menu-enabler">
<span></span>
</nav>
</header>
<nav class="mobile-menu">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact Me</li>
</ul>
</nav>
<!-- Begin main sample site content -->
<div id="wrapper">
<p>Lorem ipsum dolor set amet...</p>
</div>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/script.js"></script>
</body>
</html>
CSS:
body {
font-family: "Ludica Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}
p {
margin: 0;
padding: 0;
display: inline-block;
}
header {
margin: 0;
padding: 0;
display: inline-block;
position: absolute;
top: 0;
left: 0;
background-color: azure;
border: 1px solid black;
width: 100%;
}
/* Begin Menu Code */
.menu {
display: inline-block;
float: right;
}
.menu ul {
list-style: none;
margin: 5px 0;
}
.menu ul:last-child {
margin-right: 10px;
}
.menu ul li {
display: inline-block;
margin: 0 2px;
padding: 0;
border: 1px solid black;
}
.menu ul li a {
text-decoration: none;
color: black;
padding: 3px;
}
.menu ul li>:hover {
background-color:black;
color: white;
}
/* End Menu Code */
/* Mobile Menu Begin */
.mobile-menu-enabler {
display: none;
background-color: aqua;
}
.mobile-menu {
display: none;
position: relative;
top: 38px;
width: 100%;
border-top: 1px solid black;
}
.mobile-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-menu ul li {
margin: 0;
padding: 0;
border: 1px solid black;
border-top: 1px solid transparent;
text-align: center;
}
.mobile-menu ul li a {
margin: 0;
padding: 0;
text-decoration: none;
color: black;
}
.mobile-menu ul li:hover {
background-color: darkkhaki;
}
/* Mobile Menu End */
/* Mobile Trigger Button */
.nav-trigger {
display: none;
text-transform: uppercase;
color: black;
background-color: transparent;
margin-right: 10px;
padding: 0;
text-align: center;
}
.nav-trigger:hover {
color: red;
background-color: transparent;
}
/* End Mobile Trigger Button */
/* Dummy wrapper stuff */
#wrapper {
clear: both;
display: inline-block;
position: relative;
}
/* End Dummy wrapper stuff */
#media screen and (max-width: 900px) {
.menu {
display: none;
}
.mobile-menu-enabler {
display: block;
}
.nav-trigger {
display: inline-block;
float: right;
}
/*.mobile-menu {*/
/*display: block;*/
/*}*/
}
JavaScript:
$(document).ready(function(){ // Begin document ready function
var headerHeight = $("#topbar").height();
$(".nav-trigger").click(function() {
$(".mobile-menu").slideToggle(400)
});
$(".mobile-menu").css("top", headerHeight);
$("#wrapper").css("top", headerHeight);
}); // End document ready function
When the page loads I have a top header bar which contains dummy links. When the browser width is shrunk below the breakpoint at 900px the responsive menu kicks in, at this point upon clicking on the "3 bars icon" the dropdown menu appears as expected.
However, if I were to resize the screen back to full size without first closing the drop down menu, it continues to stay even after the browser is fully expanded.
How can I make the drop-down menu to automatically "untoggle" at the point of growing wider than the breakpoint of 900px?
Thanks
EDIT: Screenshots:
Here's how I'd like it to behave:
callmenick.com/lab-demos/10-simple-responsive-navigation
When the mobile navigation is fully expanded, it automatically slides up once the browser window is expanded

Since you're using Javascript to toggle the display when you click that menu bar icon, it pretty much nullifies the 'display' css for .mobile-menu to some extent (since it is changing the style after the css has already loaded). So you'll need to toggle the UL display value (child), and not the .mobile-menu (parent). That way the responsive .mobile-menu css stays in tact... I believe this is what that example site you mentioned does.
<nav class="mobile-menu">
<ul class="mobile-menu-items">
<li>Home</li>
<li>Work</li>
<li>Contact Me</li>
</ul>
</nav>
keep css for .mobile-menu as display: none on large screens, and display:block for smaller. Then for new class ".mobile-menu-items" you can initially set that to display: none, and toggle that with your jQuery:
$('.nav-trigger').click(function(){
$('.mobile-menu-items').slideToggle();
});
Alternatively you could toggle the visibility instead of the display.
$('.nav-trigger').click(function(){
if ( $('.mobile-menu').css('visibility') == 'hidden' )
$('.mobile-menu').css('visibility','visible');
else
$('.mobile-menu').css('visibility','hidden');
});

If you want to actually retract the mobile menu (and not just hide it in CSS) when the window gets too wide, try this :
var $window = $(window), // caching the objects for performance
$mobileMenu = $(".mobile-menu");
$window.resize(function(){
if( $window.width() > 900) $mobileMenu.slideUp();
})

updated.extremely crude example. resize
ul{list-style-type:none;}
#media screen and (min-width: 500px) {
#big li{display:inline-block;width:100px;height:32px;border:1px solid red;}
#small{display:none;}
}
#media screen and (max-width: 500px) {
#big{display:none;}
#small{display:block;}
.smaller{display:none;}
#small li:hover~ul{display:block}
.smaller:hover{display:block;}
}
<ul id="big">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul id="small">
<li>home1</li>
<ul class="smaller">
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
<li>home2</li><ul class="smaller">
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
</ul>

Related

Making mobile nav bar

I was creating a responsive website so I decided to create the tablet and mobile version and wanted to be as usual many developers do when creating a small device nav bar(burger bar). So I can add class to html file using javascript but after that there is a problem that i'm stock an hour. Thanks
here you can see the code:
codepen
document.querySelector("button").addEventListener("click", show);
function show() {
let list = document.querySelector("ul");
if (list.className != "hidden") {
list.className = "bar";
} else if (list.className == "hidden") {
list.className -= "bar";
list.className = "hidden";
}
}
header button {
float: right;
margin: 25px 25px;
border: none;
cursor: pointer;
}
header button .fa-bars {
font-size: 25px;
background-color: white;
}
header img {
padding: 25px 75px;
}
header nav {
margin-top: 25px;
margin-left: 75px;
}
.bar li {
padding: 30px 0;
border-bottom: 1px #cecece solid;
width: 85%;
}
.hidden {
visibility: hidden;
}
<header>
<img src="images/logo-black.png" alt="NewsBit" />
<button type="button">hello</button>
<nav>
<ul>
<li>NEWS</li>
<li>GUIDS & ANALYTICS</li>
<li>EVENTS</li>
<li>EXPLAINED</li>
<li>ICON CALENDAR</li>
</ul>
</nav>
</header>
CSS
In mobile, ul should be hidden by default and when you click you need to show.
In large device, button should not be there.
JS
There is a out-of-box method toggle on classList to toggle the class. No need to check conditionally.
Hope it helps ☺☺
document.querySelector("button").addEventListener("click", show);
function show() {
let list = document.querySelector("ul");
list.classList.toggle("show");
}
header button {
float: right;
margin: 25px 25px;
border: none;
cursor: pointer;
}
header button .fa-bars {
font-size: 25px;
background-color: white;
}
header img {
padding: 25px 75px;
}
header nav {
margin-top: 25px;
margin-left: 75px;
}
.bar li {
padding: 30px 0;
border-bottom: 1px #cecece solid;
width: 85%;
}
ul {
display: none;
}
.show {
display: block;
}
#media only screen and (min-width: 992px) {
ul {
display: block;
}
button {
display: none;
}
}
<header>
<img src="images/logo-black.png" alt="NewsBit" />
<button type="button">
show/hide
</button>
<nav>
<ul>
<li>NEWS</li>
<li>GUIDS & ANALYTICS</li>
<li>EVENTS</li>
<li>EXPLAINED</li>
<li>ICON CALENDAR</li>
</ul>
</nav>
</header>

Why is my list not stacking on top of each other?

I have a fixed header menu bar at the top of the webpage. Each of the titles is a link but I want a dropdown for the first link. The link components for the dropdown menu is behaving strangely, see image:
I would like the link components to be stacked on top of each other, like a proper dropdown. Below is my code:
It looks correct when I run the code snippet but when I did these codings in Visual Studio, the codings below looks just like the image.
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
.navlist li {
float: left;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
Quicklinks<i class="fa fa-angle-double-down"></i>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
<div className="linkWrapper">
Quicklinks<i class="fa fa-angle-double-down"></i>
</div>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
.navlist li {
float: left;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
.linkWrapper a:first-child {
display:block;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
remove the float for the submenu items adding
.navlist li div a {
float: none;
}
// When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() };
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
.navlist li {
float: left;
}
.navlist li div a {
float: none;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
Quicklinks<i class="fa fa-angle-double-down"></i>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>
UPDATE
Your code snippet already set links to display: block and it works as expected, your issue seems to come from somewhere else, maybe css overrides elsewhere in your project ?
.navlist a{
display:block;
padding:8px;
transition:0.3s;
}
ORIGINAL ANSWER
You're using a tags which by default are displayed inline, you could add some styling to your a to display: block or use a list :
Quicklinks<i class="fa fa-angle-double-down"></i>
<ul>
<li>All Documents</li>
<li>Divisional Websites</li>
<li>About</li>
</ul>
You may want to make this list unstyled to avoid dots.
Also to behave like a proper dropdown, this list should be hidden on first render and you will trigger the visibility with another js function listening on click event on your "Quicklinks" link. Something like :
var button = document.getElementById("dropdownButton");
var menu = document.getElementById("dropdownMenu");
button.addEventListener("click", function(e) {
menu.classList.toggle("hidden");
});
.hidden {
display: none;
}
Quicklinks
<ul id="dropdownMenu" class="hidden">
<li>All Documents</li>
<li>Divisional Websites</li>
<li>About</li>
</ul>
this is because your css have :
.navlist li {
float: left;
}
just remove it and add to .navlist a
clear: both;
}
complete code :
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
opacity: 1;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* List for header */
.navlist {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
/* just example */
.navlist div {
margin-left: 1em;
}
.navlist a{
display:block;
padding:8px;
transition:0.3s;
/* adding : ( work with -- float: left -- allready present in -- .navbar a -- */
clear: both;
}
.navlist a:hover{
background-color:rgba(255,255,255,0.3);
}
.navlist a[href="#Quiclinks"] {
background-color: #fff;
color: #000;
}
.navlist>li{
position:relative;
}
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous">
<div id="navbar">
<div class="dropdown">
<ul class="navlist">
<li>
Quicklinks <i class="fa fa-angle-double-down"></i>
<div>
All Documents
Divisional Websites
About
</div>
</li>
<li>Intro & News </li>
<li>Programmes</li>
<li>Benefits</li>
<li>Location</li>
</ul>
</div>
</div>

Navigation bar issue with media queries

When my page is resized for mobile via media queries, I show a menu bar (handle), that allows the user to click and slideToggle the navigation bar, so they can see it.
When I manually resize my page, I notice the following issue:
When I was in mobile view, and the navigation bar was visible, then when I resize it, the nav bar is visible. But, if I close the nav bar in mobile view, and then resize to full screen, my nav bar disappears, and I'm not sure why. I believe there is a problem with my jQuery. Can anyone point me in the right direction?
$(document).ready(function() {
var handle = $(".handle");
var navigation = $(".navigation");
handle.click(function() {
navigation.slideToggle();
});
});
nav ul {
background-color: #43a286;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
}
nav ul li:hover {
background-color: #399077;
transition: 0.5s;
}
nav ul li {
display: inline-block;
padding: 20px;
}
.handle {
width: 100%;
background: #005c48;
text-align: left;
box-sizing: border-box;
padding: 15px;
color: white;
display: none;
}
.handle i {
float: right;
cursor: pointer;
}
#media screen and (max-width: 400px) {
nav ul li {
box-sizing: border-box;
width: 100%;
display: block;
padding: 15px;
text-align: left;
box-shadow: 1px 1px #399077;
}
.handle {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<nav>
<div class="handle">Menu</div>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
You need to reset the navigation from hidden to visible after switch back to desktop view, otherwise it will remain hidden if he navigation is hidden. You can do it via resize() function:
$(document).ready(mobileNav);
$(window).on('resize', mobileNav);
function mobileNav() {
var handle = $(".handle");
var navigation = $(".navigation");
if (window.innerWidth <= 400) {
navigation.hide();
} else {
navigation.show();
}
handle.unbind().click(function() {
navigation.slideToggle();
});
}
Also, <a> is not allowed directly under <ul>, so move them into <li>s.
jsFiddle
$(document).ready(mobileNav);
$(window).on('resize', mobileNav);
function mobileNav() {
var handle = $(".handle");
var navigation = $(".navigation");
if (window.innerWidth <= 400) {
navigation.hide();
} else {
navigation.show();
}
handle.unbind().click(function() {
navigation.slideToggle();
});
}
nav ul {
background-color: #43a286;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
}
nav ul li:hover {
background-color: #399077;
transition: 0.5s;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 20px;
color: #fff;
}
.handle {
width: 100%;
background: #005c48;
text-align: left;
box-sizing: border-box;
padding: 15px;
color: white;
display: none;
}
.handle i {
float: right;
cursor: pointer;
}
#media screen and (max-width: 400px) {
nav ul li {
box-sizing: border-box;
width: 100%;
display: block;
text-align: left;
box-shadow: 1px 1px #399077;
}
nav ul li a {
padding: 15px;
}
.handle {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<nav>
<div class="handle">Menu</div>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
If you slideToggle the navigation menu once the .handle was clicked - it is now hidden. If you will resize the window (after the navigation is hidden) - it will still be hidden (because you did nothing to show it again).
You can use the resize event to run any other function once the window was resized (note that you will need to check if the resize was to shrink or enlarge the window, then you will need to check if the navigation is visible or not - and then to show it (if it's hidden).

create a toggle menu in form of vertical list

I am trying to create a toggle menu, i have a menu that expands when i click on it and closes when i click on it again.
HTML code for it is
<label for="menu-toggle"><img src="icons/navicon.png"></label>
<input type="checkbox" id="menu-toggle"/>
<ul id="menu">
<li>First link</li>
<li>Second link</li>
<li>Third link</li>
</ul>
css is
<style>
label
{
cursor: pointer;
}
#menu-toggle
{
display: none; /* hide the checkbox */
}
#menu
{
display: none;
}
#menu-toggle:checked + #menu
{
display: block;
}
</style>
the toggle looks like this
when i click on the 3 lines image it looks like this
I want that when i click on the 3 lines image, the menu should get displayed in a vertical list, within a block with white background . something like this
can anyone tell me how i can do so
the images are not visible here. but what you can do is css for background color and width tag for a block.
something like
#menu
{
display: none;
width: 30%;
background-color:green;
Hey I just did some adjustments to your given code, and hope the output is close to the one in your given picture.
<style>
label
{
cursor: pointer;
}
a {
text-decoration: none;
color: #9A9494;
}
li {
border-bottom:#ccc solid 1px; /* This is the divider line in between the list items */
}
#menu-toggle
{
display: none; /* hide the checkbox */
}
#menu
{
display: none;
}
#menu-toggle:checked + #menu
{
display: block;
}
.xyz{
padding-bottom: 10px;
font-size: 30px;
background-color: #fff;
}
.container{
background-color: #ccc;
width:15%;
border-radius: 10px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>DropDown</title>
</head>
<body>
<label for="menu-toggle"><img src="icons/navicon.png"></label>
<div class="container">
<input type="checkbox" id="menu-toggle"/>
<ul id="menu" style="list-style: none; padding:15px; border-radius: 15px;" >
<li class="xyz" ><a href="#" >First link</a></li>
<li class="xyz">Second link</li>
<li class="xyz">Third link</li>
</ul>
</div>
</body>
</html>
I combined stylesheet with the html... Nice helping you.. :)
Update following CSS:
#menu {
display: none;
list-style-type: none;
border-radius: 5px;
background-color: lightgray;
padding-left: 5px;
}
#menu-toggle:checked + #menu {
display: block;
}
li a {
color: #000;
text-decoration: none;
}
#menu li {
padding: 10px;
border-bottom: 1px solid #000;
margin-left: 5px;
margin-right: 5px;
}
DEMO

Creating transparent overlays for horizontal row of 3 <img>

I want to cause an overlay on mouseover for my three images. I believe it will be best to use jQuery after creating a div. However, when I add a new div to my layout (below each of the <img> in my code) My layout is screwed up; goes from horizontal list to vertical list if i try to add in any <div> below my <img>.
I mainly want the overlay just sitting there. Im sure I can figure out mouseover action, but main issue is I cannot generate initial overlay
stackoverflowers: please help me add in an overlay div that will ultimately be transparent.
home.html I have commented out my attempt at placing overlay divs
<!DOCTYPE html>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Home Page</title>
</head>
<body>
<div class="header">
<ul id="headerMenu">
<li>
PROGRAM
<ul id="programDrop">
<li><a href='#'>INSPECTIONS</a></li>
<li><a href='#'>SOFTWARE</a></li>
<li><a href='#'>SAVINGS</a></li>
</ul>
</li>
<li>LOGIN
<ul id="loginDrop">
<li><a href='#'>TECHNICIAN LOGIN</a></li>
<li><a href='#'>CUSTOMER LOGIN</a></li>
</ul>
</li>
<li>ABOUT</li>
</ul>
</div>
<div id="midMain">
<div class="circularImg">
<img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.contemporist.com/photos/e4delmar.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.rkmheatingandair.com/service-tech2.jpg"/>
<!-- <div class="overlay"></div> -->
</div>
</div>
</body>
</html>
stylesheet.css
body {
margin: 0;
}
.header {
background-color: white;
font-family: sans-serif;
height: 75px;
width: 100%;
display: table;
}
/* Main centered menu on top */
#headerMenu {
text-align: center;
padding: 0;
list-style: none;
display: table-cell;
vertical-align: bottom;
font-size: 1rem;
}
#headerMenu > li {
display: inline-block;
}
#headerMenu > li:nth-child(1) {
color:red;
}
#headerMenu li a {
text-decoration: none;
color: black;
margin: 2rem;
padding: 0;
}
#headerMenu li a:hover {
color: lightgray;
}
/* Sub Menu for Link One */
#programDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#programDrop li a{
color: black;
text-align: left;
list-style: none;
}
/* Sub Menu for Link Two */
#loginDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#loginDrop li a{
color: black;
text-align: left;
}
/* Photos on home page */
#midMain {
border: 1px solid red;
background-color: white;
text-align: center;
}
.circularImg {
overflow: hidden;
display: inline-block;
margin: auto;
padding: 0;
}
/* Removed code because nothing works as of yet */
.overLay {
}
/* Sets img imports as circular by default */
img {
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
opacity: .5;
}
included jQuery script.js
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(1)').mouseenter(function() {
$('#programDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(1)').mouseleave(function() {
$('#programDrop').css('visibility','hidden');
});
});
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(2)').mouseenter(function() {
$('#loginDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(2)').mouseleave(function() {
$('#loginDrop').css('visibility','hidden');
});
});
As per comments
CSS
.overlay {
background:black;
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
}
HTML
<div class="overlay"><img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/></div>
CODE
$(document).on("mouseover", "img", function() {
$(".overlay").css({"z-index": "999"});
$("img").css("opacity",".5");
});
Demo
http://jsfiddle.net/79zty3h7/

Categories