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
Related
I am having a problem with an absolute element. This element is the floating-count which is on the top of the navigation.
Problem is when I hover my mouse on floating-count element, the drop-down arrow also is hovering (it should suppose to hover or change color when the navigation hovers). Then when I am clicking the floating-count element the drop-down navigation also showing (it should suppose to show when the navigation was clicked).
I tried changing (playing with it as I expect to see the solution) and adding z-index to the elements but I am confused with it.
Code here:
$('.mnav').on('click', function() {
if ($(this).children('.dpdown').is(":hidden")) {
console.log('show');
$(this).children('.dpdown').slideDown("fast");
} else {
$(this).children('.dpdown').slideUp("fast");
console.log('hide');
}
});
li.mnav,
.navigation ul.right li.mnav {
display: inline-block;
position: relative;
}
a.text-link,
.navigation ul.right li.mnav a.text-link {
color: #fff;
font-size: 15px;
line-height: 15px;
padding: 14px 24px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.nav-arrow {
background: yellow;
}
.nav-arrow:after {
top: 40%;
right: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #1b6b00;
border-width: 8px;
}
.floating-count {
position: absolute;
z-index: 1;
border-radius: 20px;
background: red;
padding: 4px 8px;
top: -12px;
right: -2px;
text-decoration: none;
color: #FFF;
}
.dpdown {
position: absolute;
left: 0;
top: 50px;
width: 300px;
display: none;
z-index: 1;
}
.dpdown ul li a {
font-size: 12px;
color: #eaf2ac;
padding: 5px 30px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.dpdown ul {
list-style-type: none;
background-color: #1b6b00;
text-align: left;
margin: 0;
padding: 4px 0;
}
ul.right {
list-style-type: none;
background-color: #208100;
text-align: center;
margin: 0;
padding: 0;
float: left;
border-radius: 5px;
}
ul.right li.mnav:hover,
.navigation ul.right li.mnav a.text-link:hover {
color: #ffea00;
}
.dpdown:hover>.nav-arrow:after {
color: #ffea00;
}
.navigation .mnav:hover>.nav-arrow:after {
border-top-color: #ffea00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
<ul class="right">
<li class="mnav">
Drop Down<span class="nav-arrow"></span>
<span class="floating-count-wrap"><a class="floating-count" href="/#count">2</a></span>
<div class="dpdown">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
</li>
</ul>
</div>
Try it in jsfiddle:
You have the hover style based on .mnav and the js dropdown triggered by .mnav but .floating-count-wrap is a child of .mnav so it is triggering those events.
I adjusted the css and js to use .mnav .test-link as the selector. I also had to make the css rule use sibling and not parent selection. Similarily, in the js, the selector for the dropdown is no longer a child of $(this) so I updated that to $(this).parent()
updated js fiddle
js
$('.mnav .text-link').on('click', function() { ... });
css
.navigation .mnav .text-link:hover + .nav-arrow:after { ... }
I'm coding a responsive navbar, which turns into a burger menu below a certain width, however when I try to open the dropdown menu, it all jumps back up to the top of the page rather than remaining wherever I am within the page.
Sorry it's quite hard to describe, but do find all the code below and please let me know if you're able to see what the issue is.
Thank you all in advance:
$('#burger_menu').click(function() {
$('header ul').css('display', 'block');
$('header ul').mouseleave(function() {
$('header ul').css('display', 'none');
});
});
header {
width: 100%;
background: #62c2d2;
position: fixed;
top: 0;
z-index: 20;
}
header #logo {
width: 300px;
height: 40px;
margin: 15px;
background: url('../img/new-logo.png')center no-repeat;
background-size: cover;
float: left;
}
header nav {
padding: 10px 15px;
float: right;
}
header nav #burger_menu {
padding-right: 20px;
font-size: 40px;
display: none;
color: #fff;
}
header nav #burger_menu:visited {
color: #fff;
}
header nav #burger_menu:hover {
color: #eee;
}
header nav #burger_menu:active {
color: #fff;
}
header nav ul {
display: block;
}
header nav li {
padding: 10px;
display: inline-block;
float: left;
}
header nav a {
width: fit-content;
font-size: 18px;
color: #fff;
text-decoration: none;
position: relative;
}
#media screen and (max-width: 1023px) {
/* NAV */
header nav #burger_menu {
display: inline-block;
}
header nav ul,
nav:active ul {
display: none;
position: absolute;
padding: 20px 40px;
background: #62c2d2;
right: 0;
top: 80px;
width: 30%;
}
header nav li {
width: 100%;
text-align: center;
padding: 15px;
margin: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="clearfix">
<!-- left -->
<!-- right -->
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>
<span class="active">home</span>
</li>
<li>
<span>about</span>
</li>
<li>
<span>careers</span>
</li>
<li>
<span>contact</span>
</li>
</ul>
</nav>
</header>
I'm trying to make a nav bar with jquery, fairly simple, clicking the nav icon brings up a menu on the side, however I need a sub-menu to appear after clicking one of the options, in this case the "equipment we sell" tab. I have no problem with that as I click the tab and it toggles the menu to being visible however, all of the tabs below it become invisible (I'm assuming they don't relocate to below the now visible element). Can someone explain to me why the tabs do not make room for the new list elements. Code below.
jscript
$('.icon-menu').click(function() {
$('.menu').animate({
right: '0px'
}, 200);
$('.equipsell').hide();
});
$('.menu-exit').click(function() {
$('.menu').animate({
right: '-285px'
}, 200);
$('.equipsell').hide();
});
$('.equipment').click(function() {
$('.equipsell').toggle();
});
HTML
<header>
<div class="menu">
<img src="img/menu-exit.png" class="menu-exit" alt="Exit Button">
<ul>
<li>Home</li>
<li>About</li>
<li class="equipment">Equipment We Sell</li>
<div class="equipsell">
<li>Audiometers by Inventis</li>
<li>Middle Ear Analyzers by Inventis</li>
<li>Delfino Video Otoscopes by Inventis</li>
<li>Daisy by Inventis</li>
<li>Trumpet REM by Inventis</li>
</div>
<li>Contact Us</li>
</ul>
</div>
<div class="main-menu">
<p>Test<br>Website</p>
<img src="img/bars.jpg" class="icon-menu" alt="Menu">
</div>
</header>
So when you click the equipment class/list item from above it lowers down the "menu" class but covers up the contact us list item.
EDIT
Forgot to include css.
CSS
/***** NAV *****/
header {
background-color: #093;
padding-bottom: 5px;
}
header p {
display: inline-block;
font-size: 1.35em;
margin: 10px 0 5px 15px;
font-weight: bold;
padding: 2px;
border: 3px solid black;
}
header a {
color: black;
}
.icon-menu {
width: 35px;
height: 35px;
float: right;
margin: 20px 15px 0 0;
display: inline-block;
}
.menu {
background: #00882B;
right: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu-exit {
width: 35px;
height: 35px;
margin-left: 48%;
}
.menu ul {
border-top: 1px solid #636363;
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636363;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
color: #000000;
font-size: 15px;
font-weight: 800;
text-transform: uppercase;
}
.menu a {
color: #000000;
font-size: 15px;
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
}
.active-menu{
position: absolute;
}
.equipsell{
width: 285px;
position: fixed;
}
.equipsell li {
margin: 0;
padding: 0;
line-height: 2.5;
background-color: #c90;
}
.equipsell a{
color: white;
padding: 0;
margin: 0;
}
.bottom-half li {
background-color: #00882B;
}
/***************/
Your class .equipsell is defining the position to be fixed, which causes is to be placed a layer above the other elements.
I guess the code to create the expected result would be:
.equipsell{
width: 285px;
}
JSFiddle updated: https://jsfiddle.net/rc8br5oe/
More about the CSS positions: http://www.w3schools.com/cssref/pr_class_position.asp
So I am having trouble getting a div to position absolute over another div using javascript. The main picture is a background image. I want to click on a list item to bring a div over that image using javascript.
$(document).ready(function() {
//Carpet
$('#gray').click(function(event) {
$('.carpetArea img').remove();
$('.carpetArea').html('<img style="opacity:0; margin-top:-20px;" src="http://192.185.2.154/~sogo/tempsourceoneevents.com/wp-content/uploads/2014/10/lightgray.png"/>');
$('.carpetArea img').animate({opacity: '1', marginTop : '0px' }, 500);
});
});
The css for the carpet image
.carpetArea img {
position:absolute;
zoom:1;
}
The problem is that the image when clicked goes below the main image. It is supposed to animate a little from the top of the page a little downwards to line up over the carpet thats on the background image.
Full Code
$(document).ready(function () {
//Carpet
$('#gray').click(function (event) {
$('.carpetArea img').remove();
$('.carpetArea').html('<img style="opacity:0; margin-top:-20px;" src="http://192.185.2.154/~sogo/tempsourceoneevents.com/wp-content/uploads/2014/10/lightgray.png"/>');
$('.carpetArea img').animate({
opacity: '1',
marginTop: '0px'
}, 500);
});
});
.babBGD {
background: url("http://192.185.2.154/~sogo/tempsourceoneevents.com/wp-content/uploads/2014/10/booth.jpg") repeat scroll 0 0 transparent;
height: 612px;
margin: 0 auto;
position: relative;
width: 1112px;
}
.carpet {
height: 118px;
left: 35px;
position: absolute;
top: 132px;
width: 185px;
z-index: 1;
}
.carpet ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.carpet ul li {
cursor: pointer;
display: block;
float: left;
height: 34px;
margin-bottom: 7px;
margin-right: 2px;
text-indent: -5000px;
width: 34px;
}
.table {
height: 116px;
position: absolute;
right: 28px;
top: 134px;
width: 185px;
z-index: 1000;
}
.table ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.table ul li {
cursor: pointer;
display: block;
float: left;
height: 34px;
margin-bottom: 7px;
margin-right: 2px;
text-indent: -5000px;
width: 35px;
}
.carpet-color {
position:absolute;
zoom:1;
z-index: 100;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="babBGD">
<div class="carpet">
<ul>
<li id="gray">Gray</li>
</ul>
</div>
</div>
<div class="carpetArea carpet-color"></div>
Looks like the only thing you need to do is to move .carpetArea into .babBGD container to make carpet position relatively to it:
<div class="babBGD">
<div class="carpet">
<ul>
<li id="gray">Gray</li>
</ul>
</div>
<div class="carpetArea carpet-color"></div>
</div>
Demo: http://jsfiddle.net/w0x0vz56/6/
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');