I've got a hamburger button ".btn" - when clicked, it displays a dropdown menu with three menu items. ".menu" is display: none ; ".show" is display: block
<script type="text/javascript">
$(".btn").on("click",function(){
$('.menu').toggleClass("show");
});
</script>
What I'd like is for the class to toggle from 'show' back to 'menu' upon clicking on any of the menu items - given they are anchor links to lower sections of the page. I've tried adding a class to each menu item and implementing the reverse logic:
$(".menuLink").on("click",function(){
$('.show').toggleClass("menu");
});
^ Sadly this doesn't work, and displays all the links overlaying the menubar in un-styled fashion (blue links).
HTML
<div class="menu">
THE PRODUCT
THE STORY
CONTACT
</div>
CSS
.menu {
position: absolute;
width: 100%;
display: none;
top: 60px;
left: 0;
right: 0;
max-height: 0px;
}
.menu a {
display: inline-block;
width: 100%;
text-align: center;
padding: 20px 0px;
text-decoration: none;
color: #ddc170;
font-family: 'Oswald', sans-serif;
letter-spacing: 2px;
font-size: 15pt;
}
.show {
display: block;
max-height: 500px;
background: rgba(30, 30, 30, 0.9);
}
Any help would be wonderful. Thanks.
You can use the jQuery .text() method to set the text of the menu link depending on its current text.
.menu {
position: absolute;
width: 100%;
display: none;
top: 60px;
left: 0;
right: 0;
max-height: 0px;
}
.menu a {
display: inline-block;
width: 100%;
text-align: center;
padding: 20px 0px;
text-decoration: none;
color: #ddc170;
font-family: 'Oswald', sans-serif;
letter-spacing: 2px;
font-size: 15pt;
}
.show {
display: block;
max-height: 500px;
background: rgba(30, 30, 30, 0.9);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="menuLink">Show</a>
<div class="menu">
THE PRODUCT
THE STORY
CONTACT
</div>
<script>
$(".menuLink").on("click",function(){
$(".menu").toggleClass("show");
$(this).text()=="Show"?$(this).text("Hide"):$(this).text("Show");
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$(".menu").toggle();
});
});
</script>
</head>
<body>
<div class="menu">
THE PRODUCT
THE STORY
CONTACT
</div>
<button id="show">show</button>
</body>
at the place of button you can use simple toggle icon
Related
I want to make the menu stick to the top of the page.
The code works just fine if I just add the code to the page.
However, I want to use javascript because I want to be able to change the menu on every page without having to do it manually on each one.
document.getElementById('menu-js').innerHTML = `<div id="menu">
<div class="dropdown">
<button class="dropbtn">Button_1</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Button_2</button>
<div class="dropdown-content">
Link 4
Link 5
Link 6
</div>
</div>
</div>`
#import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Arsenal|Rubik&display=swap');
#menu {
background-color: white;
top: 0px;
left: 0px;
position: sticky;
padding-left: 10px;
margin-top: -8px;
margin-left: -30px;
margin-right: -0.51%;
border-bottom-color: black;
border-bottom-style: solid;
border-bottom: 5px;
}
.dropbtn {
background-color: white;
color: black;
padding: 16px;
font-size: 16px;
border: none;
margin: none;
font-family: 'Arsenal';
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f2d3d8;
min-width: 200px;
z-index: 1;
font-family: 'Arsenal';
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ffd3b6;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #c06014;
color: white;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem;
}
hr {
margin-left: -20px;
color: #c06014
}
<html>
<head>
<title>TITLE</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='page-container'>
<div id='content-wrap'>
<h1>Content above menu</h1>
<div id='menu-js'></div>
<h1>body</h1>
<h2>body</h2>
</div>
<footer>
<hr>FOOTER</footer>
</div>
<script src='menu.js'></script>
</body>
</html>
If possible, I would like to only use these three languages.
Thanks!
Your code seems almost perfect in terms of sticky property.
Try to add a max-height property(value in pixel) to the menu-js div.
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/
I am using a simple toggle to open and close my mobile navigation. When the navigation loads is loads the phone width and show the nav when is should be hidden causing the page to load wider than the width. Plus I can't get the Nav Menu to stay on the page so when it gets clicked again it will close.
Here is what I have and I am not sure why the nav is showing then it has not been clicked.
#nav-ph {
position: absolute;
top: 100px;
right: 0px;
margin: 0px;
padding: 5px 0;
list-style: none;
z-index: 9999;
width: 100%;
}
.nav-btn-ph {
position: absolute;
top: -2px;
left: -40px;
width: 40px;
height: 35px;
display: block;
cursor: pointer;
}
.nav-btn-ph img {
margin: 20px 0px 0px 13px;
}
.main-nav-ph li {
padding:0 10px;
text-align: left;
text-decoration: none;
color: #FFF;
font-family: #m;
font-size: 24px;
}
.main-nav-ph li a {
color: #000;
text-decoration: none;
}
.main-nav-ph li a:hover {
color: #000;
}
$(function() {
$('#nav-ph').stop().animate({'margin-right':'-300px'},1000);
function toggleDivs() {
var $inner = $("#nav-ph");
if ($inner.css("margin-right") == "-300px") {
$inner.animate({'margin-right': '0'});
$(".nav-btn-ph").html()
} else {
$inner.animate({'margin-right': "-300px"});
$(".nav-btn-ph").html()
}
}
$(".nav-btn-ph").bind("click", function(){
toggleDivs();
});
});
<div id="nav-ph">
<div class="nav-btn-ph">Nav Menu</div>
<ul class="main-nav-ph">
<li>THE ADVANTAGE
</li>
<li>OUR SERVICES
</li>
<li>OUR TEAM
</li>
<li>MAKING NEWS
</li>
<li>CONTACT
</li>
</ul>
</div>
Here is a link to jsfiddle http://jsfiddle.net/BrentRansom/vb3v5/1/
If I understood correctly, try to remove the following items
.nav-btn-ph {
position: absolute;
top: -2px;
left: -40px; //remove this css, the nav emnu will stay longer
width: 40px;
height: 35px;
display: block;
cursor: pointer;
}
better remove this animation code to stay within the margin
$('#nav-ph').stop().animate({'margin-right':'-300px'},1000);
Check this JSFiddle
I'm using the PanelSnap plugin by guidobouman for my website. But I would like to tweak it a bit to create the desired effect. I would like to hide the navigation on the first panel and display on the others.
http://jsfiddle.net/NDkZz/
This is the code I'm using now:
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
color: #ffffff;
font-family: 'Lato';
font-weight: 100;
font-size: 32px;
}
h1 {
font-weight: inherit;
text-transform: uppercase;
font-size: 250%;
margin: 0;
}
a {
color: inherit;
}
img {
max-width: 100%;
}
p {
max-width: 800px;
}
p.small,
pre {
font-size: 70%;
}
section {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
background: #1abc9c;
}
section:nth-child(2n) {
background: #16a085;
}
section section {
background: #f1c40f;
}
section section:nth-child(2n) {
background: #f39c12;
}
section pre {
background: #16a085;
}
section:nth-child(2n) pre {
background: #1abc9c;
}
.panels {
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
height: 100%;
}
.menu {
position: absolute;
z-index: 100;
}
.menu a {
display: block;
width: 100%;
padding: 25px;
background: #0ff3ec;
text-decoration: none;
margin: 0 0 25px 0;
}
.menu a.active,
.menu a:active,
.menu a:hover {
background: #1195f3;
}
HTML
<section class="menu_demo">
<div class="menu">
<a href="" data-panel="first">
First panel
</a>
<a href="" data-panel="second" class="active">
Second panel
</a>
<a href="" data-panel="third">
Third panel
</a>
</div>
<div class="panels">
<section data-panel="first">
<h1>First</h1>
</section>
<section style="background-color: black;" data-panel="second">
<h1>Second</h1>
</section>
<section data-panel="third">
<h1>Third</h1>
</section>
</div>
</section>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://guidobouman.github.io/jquery-panelsnap/jquery.customEvents.js"></script>
<script src="http://guidobouman.github.io/jquery-panelsnap/jquery.panelSnap.js"></script>
<script>
// Basic demo
$('body').panelSnap();
// Menu demo
$('.menu_demo .panels').panelSnap({
$menu: $('.menu_demo .menu')
});
</script>
I'm not sure if you intend to hide the "First Panel"/"Second Panel"/"Third Panel" links when they click on the "First Panel" link (if so, how will they see the menu again?) But if so, this should do the trick:
$('.menu a').click(function(){
if($(this).attr('data-panel') == 'first'){
$('.menu').hide();
} else {
$('.menu').show();
}
});
http://jsfiddle.net/NDkZz/1/
You can do this easily by passing a function to onSnapStart in the options:
$('.menu_demo .panels').panelSnap({
$menu: $('.menu_demo .menu'),
onSnapStart: function($target) {
if($target.find('h1').text() === "First") {
//hide menu
} else {
//show menu
}
},
});
Here's an example using jQuery's animate function to show and hide the menu.
I have the following code that makes check-boxes a little fancier by adding an image sprite to the check-box.
Javascript:
$(document).ready(function() {
/* see if anything is previously checked and reflect that in the view*/
$(".checklist input:checked").parent().addClass("selected");
/* handle the user selections */
$(".checklist .checkbox-select").click(
function(event) {
event.preventDefault();
$(this).parent().addClass("selected");
$(this).parent().find(":checkbox").attr("checked", "checked");
}
);
$(".checklist .checkbox-deselect").click(
function(event) {
event.preventDefault();
$(this).parent().removeClass("selected");
$(this).parent().find(":checkbox").removeAttr("checked");
}
);
});
CSS:
.checklist
{
list-style: none;
margin: 0;
padding: 0;
}
.checklist li
{
float: left;
margin-right: 10px;
background: url(resources/i/checkboxbg.gif) no-repeat 0 0;
width: 105px;
height: 150px;
position: relative;
font: normal 11px/1.3 "Lucida Grande" , "Lucida" , "Arial" ,Sans-serif;
}
.checklist li.selected
{
background-position: -105px 0;
}
.checklist li.selected .checkbox-select
{
display: none;
}
.checkbox-select
{
display: block;
float: left;
position: absolute;
top: 118px;
left: 10px;
width: 85px;
height: 23px;
background: url(resources/i/select.gif) no-repeat 0 0;
text-indent: -9999px;
}
.checklist li input
{
display: block;
}
a.checkbox-deselect
{
display: none;
color: white;
font-weight: bold;
text-decoration: none;
position: absolute;
top: 120px;
right: 10px;
}
.checklist li.selected a.checkbox-deselect
{
display: block;
}
.checklist li label
{
display: block;
text-align: center;
padding: 8px;
}
Markup:
<ul class="checklist">
<li>
<asp:CheckBox ID="CheckBox1" Text="<img src='' />Option" runat="server" />
<a class="checkbox-select" href="#">Select</a>
<a class="checkbox-deselect" href="#">Cancel</a>
</li>
</ul>
When the check-box is selected, class="selected" is added to the <li>.
The trouble is that if the user hits the back button, the check-boxes are still selected (page cached), but the css is not re-applied. I could always add some cache-control so the browser loads a fresh copy of the page each time, so the check boxes will not be checked, but I would rather re-apply the the class to the list item.
Each <ul class="checklist"> is wrapped in an asp.net panel that is rendered as a div with an id of ct100_ContentPlaceHolder1_Panel1 - how would I loop through each check-box in that panel and re-attach the css class if the check-box is checked?
Thanks in advance!
You can do this on load using the :checked selector:
$('.checklist :checked').parent().addClass('selected');