i want to hide and open the navigation i'v created with the "+" and "-" buttons
- when user will click on the '+' button the navigation will start open one by one.
(notice: the links are on display: none; right now)
fiddle link here: http://jsfiddle.net/RKhRy/5/
The css:
.nav {
height: 600px;
width: 150px;
display: none;
}
.nav li {
width: 150px;
height: 70px;
background-color: #232323;
border-bottom: 1px solid #393939;
text-decoration: none;
list-style: none;
line-height: 70px;
text-align: center;
cursor: pointer;
font-size: 15px;
}
#close {
width: 70px;
height: 70px;
background-color: #737373;
color: #fff;
margin-left: 150px;
position: absolute;
line-height: 70px;
text-align: center;
font-size: 30px;
cursor: pointer;
display: none;
}
#open {
width: 70px;
height: 70px;
background-color: #232323;
color: #fff;
position: absolute;
line-height: 70px;
text-align: center;
font-size: 30px;
cursor: pointer;
}
Try adding this jQuery code:
$("#open").click(function(){
$(".nav, #close").show();
$(".nav li").each(function (i) {
$(this).delay(300*i).animate({width:150},300);
});
$("#open").hide();
});
$("#close").click(function(){
$("#close").hide();
$($(".nav li").get().reverse()).each(function (i) {
$(this).delay(300*i).animate({width:0},300);
});
$("#open").show();
});
The result can be seen in this JSFiddle.
I don't know why i've coded for you but the building blocks of what you're after are here in an updated fiddle: http://jsfiddle.net/RKhRy/12/
Use jQuery's slideToggle();
I've edited your example to make it work: http://jsfiddle.net/g8AF6/3/
new CSS:
body {
color: #fff;
font-family: Tahoma;
font-weight: bold;
position:relative;
}
.nav {
height: 600px;
width: 150px;
display: none;
}
#open:focus{
visibility:hidden;
}
#open:focus + #close + .nav{
display:block;
}
#open:focus + #close {
display:block;
}
.nav li {
width: 150px;
height: 70px;
background-color: #232323;
border-bottom: 1px solid #393939;
text-decoration: none;
list-style: none;
line-height: 70px;
text-align: center;
cursor: pointer;
font-size: 15px;
}
#close {
width: 70px;
height: 70px;
background-color: #737373;
color: #fff;
position: absolute;
top:0;
left:0;
line-height: 70px;
text-align: center;
font-size: 30px;
cursor: pointer;
display: none;
}
#open {
width: 70px;
height: 70px;
background-color: #232323;
color: #fff;
line-height: 70px;
text-align: center;
font-size: 30px;
cursor: pointer;
}
now just add transitions for collapse/expand animation
regards
Basic working fiddle here: http://jsfiddle.net/phdphil/YJ8gf/#base
Essentially this bit of code, plus an id=nav in the right tag:
function setNavVisible(visible) {
var nav = document.getElementById('nav');
var close = document.getElementById('close');
var open = document.getElementById('open');
if(visible) {
nav.style.display = "block";
close.style.display = "block";
open.style.display = "none";
} else {
nav.style.display = "none";
close.style.display = "none";
open.style.display = "block";
}
}
document.getElementById('open').onclick = function() {
setNavVisible(true);
}
document.getElementById('close').onclick = function() {
setNavVisible(false);
}
I've cloned and editted your fiddle. Your html is wrong. You can't have li inside of divs. Thinking of that, your open and close divs can be refactored to something more semanthic. Like this:
Toggle Menu
<ul class="nav">
<li>START HERE</li>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>BRANDS</li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
I've also added pseudo-elements in css instead of having two elements to only one function.
Check the result here:
http://jsfiddle.net/H7ms7/
You will need to bind keydown event with CSS in my mind.
$(document).keydown(function(e){
if (e.keyCode == *NUMBER) {
}
)};
*The number should be the one that + or - trigger with.
The next thing is with the css, I would just bind $("#element").css('display','block'); With the triggers you want.
If you want them one by one like you said, I'm not absulotly sure but I know it might have to do with CSS3 transition. Check it out, dont want to mislead you.
Goodluck
Related
I am trying to add active classes on on my navigation menu so there is a border and the writting is coloured for the specific page your on but it isn't working. It worked for the primary navigation but wont work for my secondary one any ideas as to why its not working would be appreciated thank you? my code is down below. the active class at the bottom is what should be applied
const currentLocations = location.href;
const menuItems = document.querySelectorAll('.secondary a');
const menuLengths = menuItems.length
for (let i = 0; i < menuLengths; i++) {
if (menuItems[i].href === currentLocations) {
menuItems[i].className = "active"
}
}
.secondarynav-item-trading {
position: relative;
margin-top: 10px;
padding: 15px 5px;
width: 1430px;
top: 13px;
left: 30px;
}
.secondarynav-item-trading a {
display: inline-block;
text-decoration: none;
color: black;
font-size: 14px;
text-align: center;
padding: 10px;
border-radius: 20px;
width: 190px;
}
.secondarynavigation-item-trading ul {
list-style: none;
}
.secondarynavigation-item-trading li {
display: inline-block;
margin-top: 0;
}
.secondarynavigation-item-trading a:hover {
color: #fd886b;
border: 1px solid #fd886b;
font-weight: bold;
}
.secondarynavigation-item-trading a:hover::before {
width: 100%;
}
.secondarynav-item-trading ::after {
content: "";
display: table;
clear: both;
}
.secondarynavigation-item-trading a::before {
content: "";
display: block;
height: 5px;
background-color: #fd886b;
position: relative;
top: 40px;
width: 0%;
transition: all ease-in-out 250ms;
}
.secondary a.active {
color: #fd886b;
border: 1px solid #fd886b;
font-weight: bold;
}
<header class="secondarynav-messages">
<div class="secondary">
<!-- secondary navigation for homepage -->
<nav alt="secondarynavigation-messages" id="secondarynavigation-messages">
<!-- secondary navigation buttons below the main navigation -->
<ul class="secondarynavigation-messages" id="secondarynavigation-messages">
<li>Inbox</li>
<li>Sent</li>
<li>Compose a message</li>
<li>Drafts</li>
<li>Archived</li>
</ul>
</nav>
</div>
</header>
the way I have it in the code above is working for the first page but none of the others but I have done the exact same thing in the primary nav and it worked i also copied the code on a new website document and it worked but for some reason its not working here
So I have a dropdown menu and when I click it it works but when I click out it stays open. I've tried using mouseout mousedown onclick ondblclick etc but none of them work. Please help :(
[What I've tried][1]
Attach click listener to your document, if clicked element is img then display dropwdown else hide.
const menu = document.querySelector('#dropdown');
document.addEventListener('click', function(e) {
menu.classList.toggle('show', e.target.tagName == "IMG");
});
.menu {
float: right;
margin: 24px;
position: relative;
display: inline-block;
}
.menu img {
cursor: pointer;
}
.dropdown {
position: absolute;
z-index: 1;
float: right;
width: 150px;
background-color: lightgray;
top: 73px;
right: -24px;
display: none;
}
.dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
color: #B00D93;
font-weight: bold;
}
.show {
display: block;
}
<div class="menu" id="menu">
<img src="https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2018/06/Screen-Shot-2018-06-13-at-8.07.34-PM.png" id="dropdownImg" alt="" width="45px" height="45px">
<div class="dropdown" id="dropdown">
Home
About Us
Services
Feedback
</div>
</div>
check this : https://jsfiddle.net/85yz7asd/
showHide = () => {
var dropdown = document.getElementById("dropdown")
dropdown.style.display == "block" ? dropdown.style.display = "none" : dropdown.style.display = "block"
}
This is a Pure HTML and CSS example:
HTML
<div class="dropdown">
<div class="dropdown-btn">Hover Me</div>
<ul class="dropdown-list">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
CSS
.dropdown {
display: block;
position: absolute;
}
.dropdown-btn {
text-align: center;
background-color: black;
color: white;
display: block;
position: absolute;
width: 200px;
height: auto;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
.dropdown-list {
position: relative;
display: none;
width: 200px;
height: auto;
list-style: none;
margin-top: 40px;
padding: 0;
}
.dropdown-list li a {
text-align: center;
text-decoration: none;
display: block;
padding: 10px;
width: 200px;
background-color: black;
color: white;
margin-top: 5px;
}
.dropdown-list li a:hover {
background-color: grey;
color: white;
}
.dropdown:hover .dropdown-list {
display: block;
}
working js fiddle
If you want to use your current code, try this.
Clicking on the dropdownImg element will open the menu.
Clicking anywhere else will close the menu.
https://jsfiddle.net/t6wpgjrd/
document.onclick = function(e) {
if(e.target.id === "dropdownImg") {
show();
}
else{
hide();
}
}
And don't forget to remove the onclick and onblur attributes from your dropdownImg element.
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 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
I have a div container which has 3 sub divs as columns.
There is a background image into the container and i would like when i mouseover on each sub div ,the background of this div to change with a specific image.I wish on mouse out the image to be removed and be in the previous status.
i did this with css using hover, but as i said before it doesn't work in IE9(as custom view within intranet ).The error in console says SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited. but i do not use :visited or :link.
Im new in javascript and i would really appreciate your assistance.
Thank you in advance.
My code is :
#container {
width:500px;
height:350px;
border: 1px solid #092D53;
margin-left:1cm;
margin-top:1cm;
border-radius:5px;
background-image: url('image.png');
}
#column1 {
position: relative;
float: left;
width: 32%;
height: 100%;
border-right: 1px solid #092D53;
}
#column2 {
position: relative;
float: left;
width: 34%;
height: 100%;
border-right: 1px solid #092D53;
}
#column3 {
position: relative;
float:left;
width:32%;
height:100%;
}
#button1 {
align: middle;
margin-bottom: -45px;
display: table-cell;
position: absolute;
width: 95%;
height: 40px;
text-decoration: none;
text-align: center;
vertical-align: middle;
line-height: 40px;
color: #092D53;
font-family: Verdana;
font-size: 14px;
}
#button2 {
position: absolute;
margin-left: 3px;
margin-bottom: -45px;
width:95%;
align:middle;
text-decoration: none;
height: 40px;
text-align: center;
vertical-align: middle;
line-height: 40px;
color: #092D53;
font-family: Verdana;
font-size: 14px;
}
#button3 {
position: absolute;
margin-left: 5px;
margin-bottom: -45px;
width: 98%;
height:40px;
align:middle;
text-decoration: none;
text-align: center;
vertical-align: middle;
color: #092D53;
font-family: Verdana;
font-size: 14px;
}
#column1:hover {
background-image: url('one.png');
opacity:0.2;
}
#column2:hover {
background-image: url('two.png');
opacity:0.2;
}
#column3:hover {
background-image: url('three.png');
opacity:0.2;
}
Workflow 1
Workflow 2
Workflow 3
jQuery example:
$('#column1').hover(function() {
$(this).css('background-image', 'url("one.png")');
$(this).css('opacity', '0.2');
}, mouseOutHandler);
$('#column2').hover(function() {
$(this).css('background-image', 'url("two.png")');
$(this).css('opacity', '0.2');
}, mouseOutHandler);
$('#column3').hover(function() {
$(this).css('background-image', 'url("three.png")');
$(this).css('opacity', '0.2');
}, mouseOutHandler);
function mouseOutHandler() {
$(this).css('background-image', 'inherit');
$(this).css('opacity', 'inherit');
}
jQuery API Documentation of the .hover() function:
http://api.jquery.com/hover/
First function of .hover() is the mouse enter event function, same as :hover would do in CSS. Second function is the mouse leave event function, which puts the applied CSS back to normal.
Try this:
$("#DivID").hover(function(){
$("#DivID").css("color","yellow");
});
Hope it helps.....