navigation open and close animation in javascript and css only - javascript

i have a button to open menu click the button it content show fast and background move slowly my html code here
function navOpen() {
let navi = document.getElementById("Nav");
if (getComputedStyle(navi, null).display === "none") {
navi.style.display = "block";
} else {
navi.style.display = "none";
}
}
.nav {
min-height: 1.125rem;
max-height: auto;
padding: 1rem;
margin-top: 2.5rem;
display: none;
animation: mymove 1s infinite;
background: rgb(167, 165, 165);
}
#keyframes mymove {
from {
height: 0;
}
to {
height: 3.125rem
}
}
<button class="navbutton" onclick="navOpen()">Menu</button>
<nav class="nav" id="Nav">
<div class="nav_cls" id="nav-btn-cls">
<a href="#" onclick="navigationClose()">
<img class="navigation__close_button" src="/images/close.svg" alt="close">
</a>
</div>
<ul class="nav_y">
<li>
<a class="navlinks" href="#">
<span>Home </span>
</a>
</li>
</ul>
</nav>
here i try to animate use css but the menu content show fast and the back ground color show shlowly and gerkking ,how to aminate menu open and close animation using css and javascript


Try this.
function navOpen() {
let navi = document.getElementById("Nav");
if (!navi.classList.contains("colps-active")) {
navi.classList.add("colps-active");
}
}
function navigationClose() {
let navicls = document.getElementById("Nav");
if (navicls.classList.contains("colps-active")) {
navicls.classList.remove("colps-active");
}
}
.colps {
transform-origin: top;
height: 0;
opacity: 0;
transform: scale(1, 0);
transition: 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.colps-active {
transform: scale(1, 1);
opacity: 1;
height: auto;
}
.nav {
padding: 1rem;
margin-top: 2.5rem;
background: rgb(167, 165, 165);
}
<button class="navbutton" onclick="navOpen()">Menu</button>
<nav class="nav colps" id="Nav">
<div class="nav_cls" id="nav-btn-cls">
<a href="#" onclick="navigationClose()">
<img class="navigation__close_button" src="/images/close.svg" alt="close">
</a>
</div>
<ul class="nav_y">
<li>
<a class="navlinks" href="#">
<span>Home </span>
</a>
</li>
</ul>
</nav>

Related

Hide element if click outside it

What I want is to close the search bar if I click anywhere but the search bar elements (input and submit button). What I made so far is use toggle to open and close it and this is working. But I couldn't find a way so far to close it if I click anywhere outside the div.
Codepen: https://codepen.io/hateusall/pen/abdedJE
HTML:
<header>
<div class="container-fluid">
<div class="navbarCustom pleft pright ">
<div class="navbar-brand">
<img src="./images/x.png" alt="x" class="header-logo">
</div>
<ul class="list-unstyled d-xl-flex align-items-center navbar-custom">
<li class="dropdown " >Lorem Ipsum</li>
<li class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lorem Ipsum </li>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
</div>
<li> Lorem Ipsum</li>
<li> <button class="btn-wpp"> Whatsapp </button></li>
<li class="position-relative wrapper-bar">
<div class="search-icon search-toggler">
<i class="fas fa-search search"></i></div>
<div class="search-wrapper" >
<form action="#" class="">
<input type="text" placeholder="Search" class="search-input" id="info">
<button class="border-0 bg-dark text-white p-2 btn-search"><i class="fas fa-search" id="info2"></i></button>
</form>
</div>
</li>
</ul>
<div class="navbar-toggler text-white d-xl-none">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
</div>
</div>
</header>
const searchToggler = document.querySelector(".search-toggler");
const searchWrapper = document.querySelector(".search-wrapper");
searchToggler.addEventListener("click", function(e){
if ( !$(event.target).hasClass('search-toggler')) {
$(searchWrapper).toggleClass("search-wrapper-active");
close();
}
});
function close() {
if (!$(event.target).hasClass('search-wrapper-active')) {
$(document).click(function(e){
/* here i would remove active classes */
console.log("test")
})
}
}
}

DEMO
const $toggler = $(".search-toggler");
const $wrapper = $(".search-wrapper");
$toggler.on("click", function() {
$wrapper.toggleClass("search-wrapper-active");
});
$(document).on('click', function (e) {
if ($(".search-toggler, .search-wrapper").has(e.target).length === 0) {
$wrapper.removeClass("search-wrapper-active");
}
});

You can do it like this:
[...document.querySelectorAll('body')].forEach(el => {
//get all elements in body
el.addEventListener('click', event => {
//add addEventListener
if (event.target.className.includes("search") === false) {
//if clicked element does not have class search
searchWrapper.classList.remove("search-wrapper-active");
//remove search-wrapper-active class to close it
}
})
})
And that way you don't need anything else, just combine it together to close it and open (also benefit, using only JS):
const searchWrapper = document.querySelector(".search-wrapper");
[...document.querySelectorAll('body')].forEach(el => {
el.addEventListener('click', event => {
if (event.target.className.includes("search") === false) {
searchWrapper.classList.remove("search-wrapper-active");
} else {
searchWrapper.classList.toggle("search-wrapper-active");
}
})
})
Keep in mind now:
now you have event listener on all elements on page, if you need it for something else, just expand this to suit your needs, no need to add event listener click again anywhere.
const searchWrapper = document.querySelector(".search-wrapper");
[...document.querySelectorAll('body')].forEach(el => {
el.addEventListener('click', event => {
if (event.target.className.includes("search") === false) {
searchWrapper.classList.remove("search-wrapper-active");
} else {
searchWrapper.classList.toggle("search-wrapper-active");
}
})
})
html {
height: 100%;
}
body {
min-height: 100%;
}
.search {
cursor: pointer !important;
z-index: 99999;
position: relative;
}
.search-active {
cursor: pointer;
z-index: 99999;
transition: .4s all ease-in-out;
pointer-events: all !Important;
}
.search-input {
z-index: 99999;
}
.search-image {
cursor: pointer;
z-index: 99999;
}
.search-submit {
z-index: 99999999999999999999;
cursor: pointer !important;
position: relative;
pointer-events: all !Important;
}
.toggler-image {
z-index: 9999;
position: relative;
color: #000;
}
.search-input {
border-radius: .2rem;
padding-left: 16px;
z-index: 9;
position: relative;
transition: .3s ease-in-out all;
}
.search-toggler {
z-index: 99;
position: relative;
transition: .3s ease-in-out all;
}
.search-wrapper {
opacity: 0;
pointer-events: none;
transition: .3s ease-in-out all;
position: absolute;
}
.search-wrapper-active {
transform: translateY(35px);
pointer-events: all;
opacity: 1;
transition: .3s ease-in-out all;
}
.btn-search {
position: absolute;
left: 100%;
height: 45px;
width: 50px;
}
header {
background-color: #000;
width: 100vw;
padding: 32px 0px;
}
.pleft {
padding-left: 380px;
}
.custom-cont {
padding-left: 380px;
padding-right: 280px;
}
.pright {
padding-right: 280px;
}
.navbarCustom {
display: flex;
align-items: center;
justify-content: space-between;
}
header li {
color: #fff;
margin-right: 49px;
font-size: 16px;
font-family: var(--mbold);
cursor: pointer;
}
header li:hover {
color: #4aba58;
transition: .3s;
}
header ul {
margin-bottom: 0;
}
.btn-wpp {
background-color: #4aba58;
border: none;
padding: 17px 21px;
font-size: 16px;
color: #fff;
border-radius: .4rem;
transition: .4s;
}
.btn-wpp:hover {
filter: brightness(120%);
transition: .4s;
}
.cart-value {
background-color: var(--verdeClaro);
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 0;
right: 0;
text-align: center;
border-radius: 50%;
font-size: 13px;
transform: translate(80%, -80%);
}
.cart-value:hover {
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<section class="wrapper">
<header>
<div class="container-fluid">
<div class="navbarCustom pleft pright ">
<div class="navbar-brand">
<img src="./images/x" alt="x" class="header-logo">
</div>
<ul class="list-unstyled d-xl-flex align-items-center navbar-custom">
<li class="dropdown ">Lorem </li>
<li class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lorem Ipsum </li>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
</div>
<li> Lorem </li>
<li> <button class="btn-wpp"> Whatsapp </button></li>
<li class="position-relative wrapper-bar">
<div class="search-icon search-toggler">
<i class="fas fa-search search">toggler</i> </div>
<div class="search-wrapper">
<form action="#" class="">
<input type="text" placeholder="Pesquisar" class="search-input" id="info">
<button class="border-0 bg-dark text-white p-2 btn-search"><i class="fas fa-search" id="info2"></i></button>
</form>
</div>
</li>
<li class="cart position-relative">
<div class="cart-value">1</div>
<img src=".//images/carrinho.png" alt="">
</li>
</ul>
<div class="navbar-toggler text-white d-xl-none">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
</div>
</div>
</header>
<h1>TEST
<h1>

Material Components: Keeping Menu "Open" when clicking inside

MATERIAL COMPONENTS FOR THE WEB (MENUS)
This question is in relation to the Menu Component:
I've modified the code so that the menu opens when hovered instead of clicked. I'm now trying to make the menu stay open or closed when certain elements inside the menu are clicked on..But I'm having trouble getting it to work.
Can anyone help?
Codepen Link:
https://codepen.io/oneezy/pen/prejpw
Example:
When <li class="wont-close"> is clicked, the menu won't close. menu.show();
When <li class="will-close"> is clicked, the menu will close. menu.hide();
Here's my attempts:
HTML
<section class="demo">
<div class="mdc-tab-bar">
<!-- Hover Toggle (Wrapper) -->
<div class="mdc-tab-wrapper hover-toggle">
<!-- Button (For Looks) -->
<a class="mdc-button mdc-button--raised mdc-button--primary mdc-tab mdc-ripple-upgraded" role="tab">
Hover Menu
</a>
<!-- Hover Menu (Toggles Show/Hide)-->
<nav class="mdc-simple-menu mdc-tab-items-wrapper" tabindex="-1">
<ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
<!-- Won't Close (When Clicked) -->
<li class="mdc-list-item wont-close clone-me" role="menuitem" tabindex="0">
<a class="category-items flex-horizontal between-stretch" href="#">
<i class="material-icons margin-r-5">keyboard_arrow_right</i>
<span>Won't Close</span>
</a>
</li>
<!-- Will Close (When Clicked) -->
<li class="mdc-list-item will-close" role="menuitem" tabindex="0">
<a class="category-items flex-horizontal between-stretch" href="#">
<i class="material-icons margin-r-5">close</i>
<span>Will Close</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
JS
/* Hover Tabs
*********************************/
function hoverTabs() {
var menuEls = document.querySelectorAll('.mdc-simple-menu');
menuEls.forEach((el, i) => {
var menu = new mdc.menu.MDCSimpleMenu(el);
var toggle = $(el).closest('.hover-toggle')[0];
var wontClose = $(el).closest('.wont-close'); // Not working...
var willClose = $(el).closest('.will-close'); // Not working...
toggle.addEventListener('mouseover', function() {
menu.show();
});
toggle.addEventListener('mouseleave', function() {
menu.hide();
});
/* Attempt #1 (Not working...)
*******************************************************/
// wontClose.addEventListener('click', function() {
// menu.show();
// });
// willClose.addEventListener('click', function() {
// menu.hide();
// });
/* Attempt #2 (Not working...)
*******************************************************/
// $('.wont-close').on('click', function(e) {
// e.preventDefault();
// menu.show();
// });
//
// $('.will-close').on('click', function(e) {
// e.preventDefault();
// menu.hide();
// });
});
}
$(document).ready(function() {
hoverTabs();
});

When in doubt, create a pure CSS solution...
I'm not accepting my answer as THE ANSWER because this is a hack.
I just want to include this here to show my quick fix that does the exact same thing (right on down to the cubic-bezier animation).
NOTE: I'm still using the Material Design Styles it ships with... Just not any of the JS.
Codepen: https://codepen.io/oneezy/pen/PKpJXV
HTML
<!-- Hover Toggle (Wrapper) -->
<div class="mdc-tab-wrapper hover-toggle clone-menu">
<!-- Button (For Looks) -->
<a class="mdc-button mdc-button--raised mdc-button--primary">Hover Menu</a>
<!-- Hover Menu (Toggles Show/Hide)-->
<nav class="mdc-simple-menu mdc-simple-menu--open" tabindex="-1">
<ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
<!-- Won't Close (When Clicked) -->
<li class="mdc-list-item clone-me" role="menuitem" tabindex="0">
<a class="category-items flex-horizontal between-stretch" href="#">
<i class="material-icons margin-r-5">keyboard_arrow_right</i>
<span>Menu Item</span>
</a>
</li>
</ul>
</nav>
</div>
CSS
/* Reset
========================================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; }
html,
body,
main { display: flex; flex-direction: column; height: 100%; }
section { padding: 5%; }
a { color: var(--mdc-theme-primary); }
h1 { background: black; color: white; padding: .25rem 1rem; position: relative; }
h1 span { font-weight: normal; font-size: 16px; position: absolute; right: 24px; top: 14px; display: inline-block; text-transform: uppercase; }
/* Material Design Menu
========================================================================= */
/* Menu Styles */
.wrapper { position: relative; display: flex; justify-content: space-between; }
.wrapper .hover-toggle { display: inline-block; position: relative; }
.wrapper .hover-toggle .mdc-button { z-index: 2; position: relative; color: white; min-width: auto; }
.wrapper .hover-toggle .mdc-simple-menu { width: 100%; top: 100% !important; position: absolute; right: 0 !important; left: 0 !important; z-index: 1; padding: 0; }
.mdc-simple-menu .mdc-list,
.mdc-simple-menu .mdc-list-group { padding: 0; }
/* Hover Effects */
.hover-toggle .mdc-simple-menu--open { opacity: 0; transform: scale(0, 0) translateY(-40px); transition: .2s cubic-bezier(0, 0, 0.2, 1); position: absolute; transform-origin: left top 0px; left: 0px; top: 0px; }
.hover-toggle:hover .mdc-simple-menu--open { opacity: 1; transform: scale(1,1) translateY(0); }
.mdc-simple-menu .mdc-list-item:before { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: opacity .12s cubic-bezier(0,0,.2,1); transition: opacity .12s cubic-bezier(0,0,.2,1); border-radius: inherit; background: var(--mdc-theme-primary); content: ""; }
.mdc-simple-menu .mdc-list-item:hover:before { opacity: .1; }
.mdc-simple-menu .mdc-list-item:active:before { opacity: .2; }

How to make slide toggle on click?

I'm currently doing responsive design for the website using media queries with (max-width: 480px). Now, I have an issue of making slideToggle on jQuery from left to right. Basically, I'm adding class to element by using jQuery and styling this in CSS. However, I might assume there are other ways to make it...
But this is my approach. Please guys help me out, maybe you have some other recommendations how to solve this.
So, here is my html:
<div class="header">
<div class="logo">Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts">
<p class="phone">+7(499)394-46-03<br />
+7(985)427-48-55<br />
</p>
<a id="js-close" class="js-close"></a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'></a>
<a id="js-cart" class="js-cart" href="/basket"></a>
<a id='js-mnu' class='js-mnu'></a>
<a id="js-cat" class="js-cat"></a>
<div class="mainmenu">
<a id='js-cross' class='js-cross'></a>
<ul>
<li><a href="/" ><span></span></a></li>
<li><a href="/menu/16" ><span></span></a></li>
<li><a href="/menu/3" ><span></span></a></li>
<li><a href="/menu/5" ><span></span></a></li>
<li><a href="/articles" ><span></span></a></li>
<li><a href="/menu/21" ><span></span></a></li>
<li><a href="/menu/22" ><span></span></a></li> </ul>
</div>
</div>
this is CSS
#js-close {display:block;display:none;width:35px;height:35px;margin:17px 10px; position: absolute;
right: 0;}
.js-close{background:url(images/close-icon.png) center center no-repeat; opacity: 0.75; }
and this is media
#media screen and (max-width: 480px) {
p.phone._opened {
position: fixed;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
transform: translateX(-100%);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: all 0.3s ease-out;
display: block;
}
}
And my jQuery:
$(document).ready(function(){
$("#js-phone").click(function(){
$('p.phone').addClass("_opened");
});
$("js-close").click(function(){
$('p_phone').removeClass("_opened");
});
});

you have some problems with your code .
in JQ you are not writing the selectors correctly ( js-close needs to have # before it , and p_phone needs to be p.phone instead )
in CSS you need to hide your p.phone with transform:translateX(-100%) and then show it when has class opened with transform:translateX(0%) . Also add transition to the p.phone so when you close it , it will have transition
check snippet below ( Open = open button , Close = close button )
i changed the JQ a bit so it's more readable and easier to change, using selector caching ( the variables ) and event targeting. hope you don't mind
P.S i removed the media query so it will work in the snippet .
check fiddle with media query > jsFiddle
var open = $("#js-phone"),
close = $("#js-close"),
phone = $('p.phone')
$("body").on("click", function(e) {
var target = $(e.target)
if (target.is(open)) {
$(phone).addClass("opened")
}
if (target.is(close)) {
$(phone).removeClass("opened")
}
})
p.phone {
transform: translateX(-120%);
position: fixed;
top: 0;
transition: 0.3s;
-webkit-transition: all 0.3s ease-out;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
background-color: #fff;
display: block;
}
.contacts {
margin-top: 100px;
}
/*#media screen and (max-width: 480px) {*/
p.phone.opened {
transform: translateX(0);
}
/*}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="logo">Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts">
<p class="phone">+7(499)394-46-03
<br /> +7(985)427-48-55
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'>Open</a>
<a id="js-cart" class="js-cart" href="/basket"></a>
<a id='js-mnu' class='js-mnu'></a>
<a id="js-cat" class="js-cat"></a>
<div class="mainmenu">
<a id='js-cross' class='js-cross'></a>
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
</div>

Use style='display:none' for first load. And After Link click show your div and add class using addClass.
$("#js-phone").click(function() {
$('.contacts').show();
$('p.phone').addClass("_opened");
});
$(".js-close").click(function() {
$('.contacts').hide();
$('p_phone').removeClass("_opened");
});
#media screen and (max-width: 480px) {
p.phone._opened {
position: fixed;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
transform: translateX(-100%);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: all 0.3s ease-out;
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header" >
<div class="logo" >Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts" style='display:none'>
<p class="phone">+7(499)394-46-03<br /> +7(985)427-48-55
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'>Phone</a>
<a id="js-cart" class="js-cart" href="/basket">2</a>
<a id='js-mnu' class='js-mnu'>3</a>
<a id="js-cat" class="js-cat">4</a>
</div>

Bootstrap navbar disappears when in a div where it should be always visible

Sorry for the bad title, I didn't really know how to explain it concisely.
I'm trying to make a navbar that only shows up when hovering over an icon that appears only when scrolling upwards and stays visible as long as I have my cursor over it (over the navbar or the icon).
The problem is, I want it to be always visible in the first section of the website.
It works ok when first loading it, but after scrolling down and then returning up when I hover over the navbar and then I move the cursor outside it disappears.
Here's a fiddle so you can take a look: https://jsfiddle.net/kksp9pbu/1/
Here's the HTML:
<div id="menu-trigger" class="hidden-menu trigger"><i class="fa fa-bars"></i></div>
<nav class="navbar navbar-default navbar-fixed-top" id="main-nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<main>
<section class="container-fluid">
<div class="row">
<div class="col-xs-12" id="header">
<h1>The navbar should always be visible here</h1>
</div>
</div>
</section>
<section class="container-fluid">
<div class="row" id="about">
<div id="about-l"><h3>About</h3></div>
</div>
</section>
<section class="container-fluid">
<div class="row" id="portfolio">
<div id="about-l"><h3>Portfolio</h3></div>
</div>
</section>
CSS in case you need it:
#menu-trigger {
position: fixed;
top: 15px;
height: 40px;
right: 20px;
z-index:1;
cursor: pointer;
}
.fa-bars{
color: #fff
}
#main-nav {
height: 70px;
background-color: rgba(0, 119, 124, 0.46);
border-bottom: 3px solid #111;
}
.navbar-fixed-top {
top:0px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hidden-nav {
top:-75px !important;
}
.trigger {
opacity: 1;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hidden-menu {
opacity: 0;
}
#main-nav a:link,
#main-nav a:visited {
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
}
.navbar-nav {
margin-left: 80px;
}
.navbar-nav li {
padding: 30px 0 0 100px;
}
.navbar-nav>li>a {
padding: 0 0 5px 0 !important;
color: #fff !important;
}
.navbar-nav a:hover,
.navbar-nav a:active {
border-bottom: 1px solid #333;
}
.navbar-brand {
transition: color 0.2s ease;
color: #fff!important;
font-size: 2em !important;
font-weight: 100 !important;
}
.navbar-brand:hover {
color: #ffb100 !important;
}
/*----HEADER----*/
#header {
text-align: center;
height: 100vh;
background-color: #333;
background-color: #333;
color: #fff;
padding-top: 15%;
}
#header h1 {
font-size: 2.8em;
font-weight: 100;
}
/*----ABOUT----*/
#about{
height:100vh;
background-color:#39bebe;
}
#portfolio{
height:100vh;
background-color:#009eee;
}
And here's the jQuery code:
$(document).ready(function(){
var lastScrollTop = 0;
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
var aboutOffset=$("#about").offset().top;
if(scroll<=aboutOffset){ // if I haven't reached #about section yet
$("#main-nav").removeClass("hidden-nav");
} else {
$("#main-nav").addClass("hidden-nav"); //hide the navbar
function hideIt(){
$("#menu-trigger").addClass("hidden-menu"); //hide the trigger
};
if (scroll > lastScrollTop){ //scrolling down
setTimeout(hideIt, 2000);
} else {
$("#menu-trigger").removeClass("hidden-menu");
}
lastScrollTop = scroll;
$("#menu-trigger, #main-nav").on("mouseover", function(){ //if I hover over the trigger or the navbar
$("#main-nav").removeClass("hidden-nav"); // I leave the navbar visible
});
$("#menu-trigger, #main-nav").on("mouseout", function(){ //if I move the cursor out of the trigger or the navbar
$("#main-nav").addClass("hidden-nav"); // hide the navbar
});
}
}); // END $(window).scroll();
}); //END $(document).ready();

You have a function that it does something when you do scroll.
$(window).scroll(function(event) {
...
}
And you have a conditional that when it's false, this sets somthing behaviors.
if(scroll<=aboutOffset){
$("#main-nav").removeClass("hidden-nav");
} else {
...
}
The behavior that it's doing to hide the navbar is this:
$("#menu-trigger, #main-nav").on("mouseout", function(){
$("#main-nav").addClass("hidden-nav");
});
You need to delete this behavior ;-)
UPDATE
Or, a better solution would be this:
if(scroll<=aboutOffset){
$("#main-nav").removeClass("hidden-nav");
$("#menu-trigger, #main-nav").off("mouseout");
} else {
...
}

Is it possible to center a div that already has float: left; set?

currently I'm trying to create a dock (similar to the iOS dock) for my website, my full code is
function addPrevClass(e) {
var target = e.target;
if (target.getAttribute('src')) { // check if it is img
var li = target.parentNode.parentNode;
var prevLi = li.previousElementSibling;
if (prevLi) {
prevLi.className = 'prev';
}
target.addEventListener('mouseout', function() {
prevLi.removeAttribute('class');
}, false);
}
}
if (window.addEventListener) {
document.getElementById("dock").addEventListener('mouseover', addPrevClass, false);
}
li {
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.05);
}
#dock li img {
width: 64px;
height: 64px;
-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255, 255, 255, .5)));
/* reflection is supported by webkit only */
-webkit-transition: all 0.3s;
-webkit-transform-origin: 50% 100%;
}
#dock li:hover img {
-webkit-transform: scale(2);
margin: 0 2em;
}
#dock li:hover + li img,
#dock li.prev img {
-webkit-transform: scale(1.5);
margin: 0 1.5em;
}
#dock-container ul {
text-align: center;
}
<div id="dock-container">
<div id="dock">
<ul>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
</ul>
<div class="base"></div>
</div>
</div>
But my problem here is that my dock is not centered on the website, and when i try to take the float: left; off, my dock becomes vertical, how would i center the dock and still keep it horizontal? any ideas?

Change float:left to display: inline; or display: inline-block for li, depending on your needs:
li {
display: inline-block;
}

You may use the display:table; property and set margin:auto; if i understood your trouble. This way , ul can shrink on its content and still behave as a block element.
function addPrevClass(e) {
var target = e.target;
if (target.getAttribute('src')) { // check if it is img
var li = target.parentNode.parentNode;
var prevLi = li.previousElementSibling;
if (prevLi) {
prevLi.className = 'prev';
}
target.addEventListener('mouseout', function() {
prevLi.removeAttribute('class');
}, false);
}
}
if (window.addEventListener) {
document.getElementById("dock").addEventListener('mouseover', addPrevClass, false);
}
li {
float: left;
}
ul {
display: table;
margin: auto;
list-style-type: none;
/*margin: 0;*/
padding: 0;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.05);
}
#dock li img {
width: 64px;
height: 64px;
-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255, 255, 255, .5)));
/* reflection is supported by webkit only */
-webkit-transition: all 0.3s;
-webkit-transform-origin: 50% 100%;
}
#dock li:hover img {
-webkit-transform: scale(2);
margin: 0 2em;
}
#dock li:hover + li img,
#dock li.prev img {
-webkit-transform: scale(1.5);
margin: 0 1.5em;
}
#dock-container ul {
text-align: center;
}
<div id="dock-container">
<div id="dock">
<ul>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
</ul>
<div class="base"></div>
</div>
</div>

If you want to keep the float: left to avoid the space between each list item you can use:
#dock {
text-align: center;
}
ul {
display: inline-block;
}

css3 can save you. Add the following and try
#dock{
display: flex;
align-items: center;
justify-content: center;
}

Categories

Resources