I've made a simple Navbar that's fixed to the top.
Originally when at the top, I would like the logo to be slightly larger, then on scroll down make it transition itself into the navbar.
When scrolling back to the top I would like the logo to come back out.
Any help or tips greatly appreciated!
Not scrolled
Scrolled down
Here's a codepen of what I have so far; the logo is oval shaped so I used batman as an example:
http://codepen.io/anon/pen/NRzWXk
HTML:
<nav>
<div id="nav_wrapper">
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
<li><img src="http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908" height="50px" width="60px">
</li>
<li>Four
</li>
<li>Five
</li>
<li>Six</li>
</ul>
</div>
</nav>
CSS:
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #d7d2c4;
}
nav {
background-color: #704e46;
top: 0;
position: fixed;
width: 100%;
}
#nav_wrapper {
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 15px;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li:hover {
background-color: #5d4037;
cursor: pointer;
}
nav ul li:hover a{
color: whitesmoke;
}
Hope you are looking for something like this
$(window).scroll(function() {
var scroll = $(window).scrollTop();
//>=, not <=
if (scroll >= 300) {
//clearHeader, not clearheader - caps H
$("#nav_wrapper").addClass("scrolled");
}
else{
$("#nav_wrapper").removeClass("scrolled");
}
});
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #d7d2c4;
height: 1000px;
}
nav {
background-color: #704e46;
top: 0;
position: fixed;
width: 100%;
}
#nav_wrapper {
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 15px;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li:hover {
background-color: #5d4037;
cursor: pointer;
}
nav ul li:hover a{
color: whitesmoke;
}
.logo {
padding: 50px;
transition: all ease-in .25s;
margin-bottom: -30px
}
.logo img{
transform : scale(3);
transition: all ease-in .25s;
}
.scrolled .logo{
padding: 15px;
}
.scrolled .logo img{
transform : scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title> Camping Santa Lucia </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav>
<div id="nav_wrapper">
<ul>
<li>One
</li><li>Two
</li><li>Three
</li><li class="logo"><img src="http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908" height="50px" width="60px">
</li><li>Four
</li><li>Five
</li><li>Six</li>
</ul>
</div>
</nav>
</body>
</html>
I'm not sure how to do it with pure CSS but since you tagged JQuery I'm going to go with that. The updated codepen is here: http://codepen.io/anon/pen/QyggBJ
Basically you add a position of absolute to your image and place it in the center. Then use jquery to detect scrolling and change position between static and absolute.
CSS:
img{
position:absolute;
right:48%;
}
Jquery:
$(window).scroll(function (e){
var scrollTop = $('body').scrollTop();
var topDistance = $('#nav_wrapper').offset().top;
if (topDistance == 0) {
$('img').css('position','absolute');
}else{
$('img').css('position','static');
}
});
try the jquery scroll() method
$("window").scroll(function() {
$("logo").animate(params);});
for params put in what 2d tranform you want like scale(2,3) etc.
Heres my take on it. Used jQuery for the toggling of the class:
http://codepen.io/banned/pen/GoEvEY
HTML:
<html>
<head>
<title> Camping Santa Lucia </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav>
<div id="nav_wrapper">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<a class="image" href="#"></a>
<ul>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
</nav>
</body>
</html>
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #d7d2c4;
height: 800px;
}
nav {
background-color: #704e46;
position: fixed;
width: 100%;
}
#nav_wrapper {
width: 100%;
text-align: center;
display: block;
}
nav ul {
list-style: none;
display: inline-block;
padding: 0;
margin: 0;
}
nav ul li {
list-style-type: none;
display: inline;
padding: 15px;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
Css:
nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li:hover {
background-color: #5d4037;
cursor: pointer;
}
nav ul li:hover a{
color: whitesmoke;
}
.image {
height: 50px;
width: 80px;
background: url("http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908") no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle;
transition: 0.5s;
transform: scale(2);
margin: 30px 30px 0px;
}
.image.scrolled {
transition: 0.5s;
transform: scale(1);
margin: 0 10px;
}
jQuery:
$(window).scroll(function() {
if ($(window).scrollTop() > 70) {
if (!$(".image").hasClass("scrolled")) {
$(".image").toggleClass("scrolled");
}
} else if ($(window).scrollTop() < 70) {
if ($(".image").hasClass("scrolled")) {
$(".image").toggleClass("scrolled");
}
}
});
Related
I wanted my menu to close when any of the links were clicked, and the same when I clicked outside the menu area, I tried different ways and was unsuccessful, could you help me?
I tried to use javascript but the result failed, I'm still a beginner so I'm having trouble.
JS
const btnMobile = document.getElementById('btn-mobile');
function toggleMenu(event) {
if (event.type === 'touchstart') event.preventDefault();
const nav = document.getElementById('nav');
nav.classList.toggle('active');
const active = nav.classList.contains('active');
event.currentTarget.setAttribute('aria-expanded', active);
if (active) {
event.currentTarget.setAttribute('aria-label', 'Fechar Menu');
} else {
event.currentTarget.setAttribute('aria-label', 'Abrir Menu');
}
}
btnMobile.addEventListener('click', toggleMenu);
btnMobile.addEventListener('touchstart', toggleMenu);
I looked in various forums and classes, however, for some reason none of the scripts worked.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Mobile</title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<header id="header">
<a id="logo" href="">Menu</a>
<nav id="nav">
<button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false">
<span id="hamburger"></span>
</button>
<ul id="menu" role="menu">
<li>Home</li>
<li>Serviços</li>
<li>Páginas</li>
<li>Projetos</li>
<li>Empresas</li>
<li>Cupcode</li>
<li>Recursos</li>
<li>Contato</li>
</ul>
</nav>
</header>
<script src="menu.js"></script>
</body>
</html>
Something like this should work. It's with JQuery.
I'm a beginner myself so it's maybe a bit too complicated or something else. But that did work for me.
It's not with your class and id names. It's just for you seeing how it can work.
$(document).mouseup(function (e) {
var container = $("#nav-toggle");
if (!container.is(e.target) // if clicked outside
&& container.has(e.target).length === 0)
{
container.hide();
$( "#nav-toggle" ).prop( "checked", false ); //to uncheck
}
});
$('.i').click(function() { // if i is clicked hide all the links
$('#nav-li').hide();
});
$('.nav-toggle').click(function() { // if the hamburger is clicked show them again
$('#nav-li').show();
});
#navbar {
text-align: center;
margin-top: -13px;
z-index: 999;
width: 100%;
font-family: 'Poppins';
position: sticky;
top: 0;
width: 100%;
height: 80px;
background-color: #fff
box-shadow: 10px 10px 20px #fff
}
.logo {
letter-spacing: 1px;
margin-bottom: -10px;
font-weight: bold;
margin-left: 10px;
font-size: 20px;
text-align: left;
font-family: 'Poppins';
padding: 5px;
text-transform: uppercase;
color: #000;
}
.nav-toggle {
display: none;
}
.nav-toggle-label {
position: absolute;
top: 15px;
right: 20px;
height: 30px;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: #000;
height: 2px;
width: 2em;
border-radius: 5px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
cursor: pointer;
position: absolute;
text-align: left;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
padding: 0;
height: 220px;
list-style: none;
background-color: #fff;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: black;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-webkit-transition: all 250ms ease-in-out;
}
.nav-toggle:checked ~ nav {
transform: scale(1, 1);
background-color: #fff;
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
.nav-toggle:checked ~ nav ul {
background-color: #fff;
}
.nav-toggle:checked ~ .nav-toggle-label {
display: none;
}
.nav-close-label {
font-size: 28px;
position: absolute;
top: 10px;
right: 24px;
display: none;
}
.nav-toggle:checked ~ .nav-close-label {
display: block;
animation: nav3 1s ease;
}
.fadeInBottom { animation-name: nav3 }
#keyframes nav3 {
from {
opacity: 0;
}
to { opacity: 1 }
}
.background {
background-color: white;
}
.spacer {
height: 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
<header id="navbar">
<h1 class="logo">
<div>
Logo
</div>
</h1>
<input label="" type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul id="nav-li">
<li class="i">Home</li>
<li class="i">Example</li>
<li class="i">Example</li>
<li class="i">Example</li>
<li class="i">Example</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label" id="nav-toggle-label">
<span></span>
</label>
<label class="nav-close-label" id="nav-close-label">✕</label>
</header>
<div class="spacer"></div> <!--DONT COPY-->
</div>
Good day,
I was inspired by a youtube tutorial to create a hamburger menu. When I resize my PC browser window to a given width, the hamburger menu appears and everything is working absolutely fine, as you can see in this first screenshot:
The only problem I'm facing is when I try to call the same page using my Android (Samsung Galaxy S20) smartphone, the "classic" menu bar appears.
Do you think I need to add a function which would be smartphone specific, so I could have the same hamburger menu on my smartphone as on the first picture?
I don't know whether it could be helpful - most importantly, I don't know where to start to investigate - but I'm enclosing my html, css and javascript files.
Any help is appreciated. Thanks in advance.
Here is my html code:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/mystyle.css?rnd=999" />
<script type="text/javascript" src="scripts/menu.js"></script>
</head>
<body>
<header>
<nav class="navbar">
<div class="branding">
<h2>Welcome</h2>
</div>
<label for="input-hamburger" class="hamburger "></label>
<input type="checkbox" id="input-hamburger" hidden>
<ul class="menu">
<li>Home</li>
<li>Portfolio</li>
<li class="has-dropdown">
<a href="#" class="menu-link">Services
<span class="arrow"></span>
</a>
<ul class="submenu">
<li>Web Design</li>
<li>Web Development</li>
<li class="has-dropdown">
<a href="#" class="menu-link">Full Stack Development
<span class="arrow"></span>
</a>
<ul class="submenu">
<li>Wordpress Development</li>
<li>Front End Development</li>
<li class="has-dropdown">
<a href="#" class="menu-link">MEAN Stack Development
<span class="arrow"></span>
</a>
<ul class="submenu">
<li>MongoDb</li>
<li>ExpressJS</li>
<li>AngularJS</li>
<li>NodeJS</li>
</ul>
</li>
<li>Back End Development</li>
</ul>
</li>
<li>UI/UX Design</li>
</ul>
</li>
<li>Articles</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main></main>
</body>
</html>
Here is my css code (mystyle.css) that my html code is referring to :
:root {
box-sizing: border-box;
--primary: #e70146;
--hover-color: #fdd052;
--dark: #1c2022;
--light: #fff;
--header-bg: var(--primary);
}
*,
*::after,
*::before {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
font-family: "josefin sans", "helvetica", sans-serif;
font-size: 1rem;
}
header {
background: var(--header-bg);
padding-left: 1.5em;
position: sticky;
top: 0;
}
.branding-logo {
color: var(--light);
font-size: calc(0.8rem + 1vw);
text-decoration: none;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu {
display: flex;
flex-direction: row;
}
.menu li {
list-style: none;
}
.menu li a {
display: block;
text-decoration: none;
color: var(--light);
padding: 1em 1.5em;
font-size: 1rem;
}
/* Styling submenu */
.has-dropdown {
position: relative;
}
.submenu {
position: absolute;
left: 0;
background-color: var(--dark);
white-space: nowrap;
padding: 1.5em 0;
min-width: 16em;
/* hide submenus */
opacity: 0;
transform: scaleY(0);
transform-origin: top center;
}
.submenu > li > a {
padding: 0.8em 1.5em;
}
.submenu .submenu {
left: -100%;
top: 0;
}
.submenu .submenu .submenu {
left: -100%;
top: 0;
}
.menu > li:hover > a,
.submenu > li:hover > a {
background-color: hsla(0, 0%, 100%, 0.05);
color: var(--hover-color);
}
.menu > li:hover > a {
background-color: hsla(0, 0%, 0%, 0.95);
}
/* Arrows */
.arrow {
width: 0.5em;
height: 0.5em;
display: inline-block;
vertical-align: middle;
border-left: 0.15em solid currentColor;
border-bottom: 0.15em solid currentColor;
transform: rotate(-45deg);
margin-top: -0.25em;
transition: transform 100ms ease-in-out;
}
/* Reveal */
.menu > li:hover > a + .submenu,
.submenu > li:hover > a + .submenu {
opacity: 1;
transform: scaleY(1);
}
/* ANIMATE aRROWS */
.menu > li:hover > a > .arrow,
.submenu > li:hover > a > .arrow {
transform: rotate(225deg);
}
#media only screen and (max-width: 78.75em) {
.submenu .submenu .submenu {
left: -100%;
top: 0.5em;
}
.submenu {
min-width: 16em;
}
}
#media only screen and (max-width: 58.75em) {
.menu li a {
font-size: 1rem;
}
}
#media only screen and (max-width: 500px) {
header {
/* position: relative; */
padding: 1.5em 2em;
}
.menu {
flex-flow: column;
position: absolute;
background: var(--light);
top: 4.55em;
left: 0;
right: 0;
height: 100vh;
opacity: 0;
transform: scaleY(0);
transform-origin: top center;
transition: 200ms transform cubic-bezier(0.36, 0.4, 0.42, 1.48) 100ms,
100ms opacity ease-in-out;
overflow-y: scroll;
}
.menu > li > a {
font-size: 1rem;
color: var(--dark);
}
.submenu > li > a {
font-size: 1rem;
}
.submenu {
top: 0;
padding-left: 1.5em;
border-left: 0.12em dotted hsla(342, 99%, 45%, 0.95);
}
.submenu .submenu {
left: 0;
top: 0;
}
.submenu .submenu .submenu {
left: 0;
top: 0;
}
.menu > li:hover > a + .submenu,
.submenu > li:hover > a + .submenu {
position: relative;
}
.hamburger {
width: 2em;
height: 0.25em;
display: block;
background: var(--light);
position: relative;
cursor: pointer;
transition: 0.2s transform ease-in-out;
}
.hamburger::after,
.hamburger::before {
content: "";
position: absolute;
left: 0;
background: inherit;
width: inherit;
height: inherit;
transition: 0.2s transform ease-in-out;
}
.hamburger::after {
top: 0.65em;
}
.hamburger::before {
bottom: 0.65em;
}
.close::after,
.close::before {
top: 0;
transition: 0.2s transform ease-in-out;
}
.close::before {
display: none;
}
.close {
transform: rotate(45deg);
transition: 0.2s transform ease-in-out;
}
.close::after {
transform: rotate(-90deg);
}
/* reveal menu */
input[type="checkbox"]:checked + .menu {
position: absolute;
opacity: 1;
transform: scaleY(1);
}
}
main {
/* just to make scrollable vertically to see sticky navbar */
height: 200vh;
}
Here is my javascript code (menu.js) that my html is referring to:
const hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", function () {
this.classList.toggle("close");
});
YOU CAN TRY THIS:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Font Awesome -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!-- MDB -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css"
rel="stylesheet"
/>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler ms-auto" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarToggleExternalContent3" aria-controls="navbarToggleExternalContent3"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
</div>
</nav>
<div class="collapse" id="navbarToggleExternalContent3">
<div class="bg-light shadow-3 p-4">
<button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
<button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
<button class="btn btn-link btn-block m-0">Link 3</button>
</div>
</div>
<!-- MDB -->
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.js"
></script>
</body>
</html>
You just missed to add:
<meta name="viewport" content="width=device-width, initial-scale=1" />
It is necessary to add "viewport" to tell the browser to render pages according to the width of the device.
I created a navigation bar it works fine.
It consists of several tabs such as Home, about, services, contact.
But I want to close it when I click on the contents of the web page.
Code:
(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 1200px;
background-color: lightgrey;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
How can I close my navigation bar, when I click on the other contents in the web page.
Any help will be appreciated.
Thank you in advance.
The simplest way is to set a "click" event on the "content" area so that whenever anything within it is clicked on, it causes the menu to be hidden again:
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
Demo:
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
P.S. I rearranged the rest of your JavaScript slightly to all be within a "ready" block, I wasn't sure what the logic of it was previously.
P.P.S. Your demo contained jQuery twice. This is both unnecessary and can also lead to unpredictable issues. I've removed the older version in my demo above.
SERBIAN: Jednostavno samo dodaj ovo na kraju svoje skripte:
ENG: Just add this at the end of your script:
$('div').click(function(){
$('nav').removeClass("active-nav");
});
You only have to attach an onclick event handler to document.
var height = $(window).height();
var width = $(window).width();
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(document).on('click', function(e) {
if(!$(e.target).closest(bodyEl).length && bodyEl.hasClass('active-nav')) {
bodyEl.removeClass('active-nav');
}
});
});
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width:50px;
line-height: 40px;
text-align:center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars{
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
</script>
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
I want my i elements to lose the outline class on hover, but for some reason this is not working. The class is lost and added again instantly without a fade/delay. If I try this exact same code with a class of background then it does work. What am I not seeing here?
The second problem is that when I do try this with a background class, the background stays there for the duration of the fade (in this case 500ms) and then disappears instantly. This should also be a fade, like a fade out.
Thank you!
JSFiddle
$('nav a').hover(function(){
if (!$(this).find("i").hasClass("home")){
$(this).find('i').toggleClass('outline', 500);
}
})
.hover() can be passed 2 functions as arguments. The first is like .mouseover() and the second is the .mouseout()
$('nav a').hover(function() {
$(this).find('.home').removeClass('outline');
}, function() {
$('.home').addClass('outline');
})
Update
You can add fadein and fadeout effect without Javascript, only with css:
nav {
font-size: 20 px;
}
nav a {
padding-left: 30 px;
}
nav a i {
position: absolute;
left: 0;
}
nav a i.star: not(.outline) {
opacity: 0;
transition: opacity 300 ms ease;
}
nav a: hover.star: not(.outline) {
opacity: 1;
transition: opacity 300 ms ease;
}
Demo here.
With the help of [Radonirina Maminiaina][1]'s answer and some altering of the code by myself I made it work exactly as intended.
It was Radonirina's idea to put the second icon right behind the original icon by using position: absolute; (see his code above), but then I came up with the idea to add the class "dark" to the hidden icon underneath and simply select it to make the opacity 0, and 1 on hover, including the transition effect. This made the CSS a lot simpler and it works beautifully.
Thanks again!
Here is a working example of the end result:
$('.menu-toggle').click(function() {
$('nav').toggleClass('nav-open', 500);
$(this).toggleClass('open');
})
#import url('https://fonts.googleapis.com/css?family=Fjalla+One');
/* Navigation bar */
header {
position: fixed;
height: 50px;
width: 100%;
background: #666666;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav a {
color: #222;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
font-size: 1rem;
font-family: Fjalla One;
}
.smallNav {
position: absolute;
top: 100%;
right: 0;
background: #CCCCCC;
height: 0px;
overflow: hidden;
}
.nav-open {
height: auto;
}
.smallNav a {
color: #444;
display: block;
padding: 1.5em 4em 1.5em 3em;
border-bottom: 1px solid #BCBCBC;
}
.smallNav a:last-child {
border-bottom: none;
}
.smallNav a:hover,
.smallNav a:focus {
color: #222;
background: #BABABA;
}
/* Menu toggle */
.menu-toggle {
padding: 1em;
position: absolute;
right: 1em;
top: 0.75em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: white;
height: 3px;
width: 1.5em;
border-radius: 3px;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
}
.menu-toggle:hover {
transform: scale(1.1);
}
i.icon {
margin-right: 0.5em !important;
font-size: 1.2em !important;
}
/* Change icons on hover */
nav a i.dark {
position: absolute;
left: 42px;
}
nav a i.dark {
opacity: 0;
transition: opacity .25s ease;
}
nav a:hover i.dark {
opacity: 1;
transition: opacity .25s ease;
}
nav a:hover i.outline {
opacity: 0;
transition: opacity .25s ease;
}
<!DOCTYPE html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<header>
<div class="header-container">
<nav class="smallNav">
<ul>
<li><i class="icon home"></i>Home</li>
<li><i class="icon star outline"></i><i class="icon star dark"></i>Featured</li>
<li><i class="icon newspaper outline"></i><i class="icon newspaper dark"></i>News</li>
<li><i class="icon user outline"></i><i class="icon user dark"></i>Career</li>
<li><i class="icon envelope outline"></i><i class="icon envelope dark"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger">
</div>
</div>
</div>
</header>
im trying to add this image to the bottom left but it keeps heading underneather the header. any tips to fix this? or where I am going going wrong? the last code is the one i am trying to get alined.
http://imgur.com/a/toq5V < how the website normaly looks
http://imgur.com/a/2Gb9F < when i add the img code
Jsfiddle
https://jsfiddle.net/fecr9w0t/#&togetherjs=ODnAazMkx8
HTML
<!DOCTYPE html>
<html>
<head>
<title> Home - A.Willi A.G</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<h1 align="center">
<img src="logo.png" alt="A.Willi A.G" />
</h1>
<div class="menu_div">
<ul>
<li>Home</li>
<li class="dropdown">
Bewerber
<div class="dropdown-content">
Info
Jobs
</div>
</li>
<li class="dropdown">Kunde
<div class="dropdown-content">
Personalverleih
Werkzeuge Mieten
Referenzen
Qulität, Sicherheit und Weiterbildung
</div>
</li>
<li>Kontakt</li>
</ul>
</div>
<div class="fadein">
<img src="welder1.png">
<img src="welder2.png">
<img src="welder3.png">
</div>
<div class="fadein img">
</div>
<img src="swissstaffing_sqs_logo_cmyk.png" alt="Swiss Staffing" >
</body>
</html>
CSS
body { font-family: verdana; background:white ; color: white; }
.menu_div{background-color: #333; width:100%;}
ul {
list-style-type: none;
margin: 0 auto;
display:table;
padding: 0;
z-index: 100;
overflow: hidden;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: black;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
#keyframes fade {
0% { opacity: 0; }
11.11% { opacity: 1; }
33.33% { opacity: 1; }
44.44% { opacity: 0; }
100% { opacity: 0; }
}
.fadein { position:absolute; height:102px; width:50px; outline: 1px solid blue; }
.fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s; }
.fadein img:nth-child(2) { animation-delay: 3s; }
.fadein img:nth-child(3) { animation-delay: 6s; }
.menu_div {
position: relative;
z-index: 0;
border: dashed;
height: 2.9em;
margin-bottom: 0em;
margin-top: 0em;
z-index:1000;
}
.fadein {
position: relative;
z-index: 3;
background: ;
width: 100%;
left: 1px;
top: 0em;
}
.fadein img{
margin:0 auto;
width: 100%;
max-width: 4060px;
min-width: 900px;
max-height: 500%;
}
Javascipt
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
Below is the code I am trying to fix
<img src="swissstaffing_sqs_logo_cmyk.png" alt="Swiss Staffing" >
I have tried using the code below but it didnt work when trying to align it
.container {
position: relative;
}
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>
<div class="container">
<img src="trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="bottomright">Bottom Right</div>
</div>
If you want to align an image to always be in a certain position on the page then you must give it "position:absolute" then you could define "bottom:0;" and "left:0" this will solve your positioning problem.
If you just give it that it will be positioned relative to the page, if you want it to be positioned absolutely within a container then you must give the parent container "position:relative"
Hope that helps! :)
managed to fix it by adding
<img src="swissstaffing_sqs_logo_cmyk.png" height=80 style="position:fixed;bottom:0px;left:0px;z-index:999" />
cheers for the help folks