I am making user dropdown when we click on the picture we get a dropdown or a card. I want to close it when user click outside of dropdown. The code of closing will be in JavaScript. Please solve this problem.
I think there will be a remove function in JavaScript which will remove the dropdown after clicking on it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple popup menu</title>
<style>
body {
margin: 0;
background: tomato;
font-family: 'Open Sans', sans-serif;
}
.menubtn {
cursor: pointer;
width: 40px;
height: 20px;
right: 10px;
top: 10px;
position: absolute;
}
.userimg {
border-radius: 50%;
height: 35px;
width: 35px;
}
.navmenu {
width: 150px;
border-radius: 10px;
margin-top: 30px;
background: #fff;
position: absolute;
right: 18px;
top: 25px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
z-index: 10;
visibility: hidden;
opacity: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.navmenu.opened {
visibility: visible;
opacity: 1;
}
.navmenu::before {
content: '';
position: absolute;
top: -5px;
right: 7px;
width: 15px;
height: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.navmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.navmenu ul.text-list {
text-align: left;
font-weight: 100;
width: 100%;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.navmenu ul.text-list li a {
text-decoration: none;
padding-left: 20px;
padding-top: 5px;
color: #343434;
font-weight: 600;
display: block;
line-height: 27px;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
.navmenu ul.text-list li a:hover {
color: tomato;
}
</style>
</head>
<body>
<div class="menubtn">
<span>
<img class="userimg" src="http://tryma.in/images/user/default.png"/>
</span>
</div>
<div class="navmenu">
<ul class="text-list">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('.menubtn').on('click', function() {
$('.navmenu').toggleClass('opened');
});
</script>
</body>
</html>
Please help me in solving this code. Thank You
Bind click on document and remove opened class on click of document.
Use e.stopPropagation() so that event does not propagate on document which event is invoked on click of the .menubtn
$('.menubtn').on('click', function(e) {
e.stopPropagation();
$('.navmenu').toggleClass('opened');
});
$(document).on('click', function() {
$('.navmenu').removeClass('opened');
});
body {
margin: 0;
background: tomato;
font-family: 'Open Sans', sans-serif;
}
.menubtn {
cursor: pointer;
width: 40px;
height: 20px;
right: 10px;
top: 10px;
position: absolute;
}
.userimg {
border-radius: 50%;
height: 35px;
width: 35px;
}
.navmenu {
width: 150px;
border-radius: 10px;
margin-top: 30px;
background: #fff;
position: absolute;
right: 18px;
top: 25px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
z-index: 10;
visibility: hidden;
opacity: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.navmenu.opened {
visibility: visible;
opacity: 1;
}
.navmenu::before {
content: '';
position: absolute;
top: -5px;
right: 7px;
width: 15px;
height: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.navmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.navmenu ul.text-list {
text-align: left;
font-weight: 100;
width: 100%;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.navmenu ul.text-list li a {
text-decoration: none;
padding-left: 20px;
padding-top: 5px;
color: #343434;
font-weight: 600;
display: block;
line-height: 27px;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
.navmenu ul.text-list li a:hover {
color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menubtn">
<span>
<img class="userimg" src="http://tryma.in/images/user/default.png"/>
</span>
</div>
<div class="navmenu">
<ul class="text-list">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
Related
The navbar is not closing when a user clicks on links to navigate through website?
I had tried to add a click event listener to every link to close navbar but it didn't work!
Also the hamberberger menu icon in active position i.e. X is not aligned well. But the major preblem is to collapse the navbar when clicked.
$(document).ready(function() {
$('.container').click(function() {
$('.navbar .menu').toggleClass("active");
});
});
function myFunction(x) {
x.classList.toggle("change");
}
#media (max-width: 1104px) {
.about .about-content .left img {
height: 350px;
width: 350px;
}
}
#media (max-width: 991px) {
.max-width {
padding: 0 50px;
}
}
#media (max-width: 947px) {
.menu-btn {
display: block;
z-index: 999;
}
/* .menu-btn i.active:before {
content: "\f00d";
} */
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
background: #111;
text-align: center;
padding-top: 80px;
transition: all 0.3s ease;
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
}
.navbar {
position: fixed;
width: 100%;
z-index: 999;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
transition: all 0.3s ease;
}
.navbar.sticky {
padding: 15px 0;
background: crimson;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
position: relative;
color: #fff;
font-size: 35px;
font-weight: bold;
text-transform: uppercase;
font-family: 'Orbitron', sans-serif;
border: 3px solid #fff;
padding: 0px 10px;
text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%);
letter-spacing: 2px;
}
.navbar .logo a::after {
content: 'PANDEY';
position: absolute;
font-size: 15px;
font-weight: bold;
bottom: -12px;
/* color: crimson; */
right: 15px;
background: crimson;
border-radius: 5px;
/* box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); */
padding: 0px 4px;
letter-spacing: 2px;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.navbar.sticky .logo a::after {
border-radius: 4px;
background: #fff;
color: crimson;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);
}
.container {
display: inline-block;
cursor: pointer;
box-sizing: border-box;
}
.bar1 {
width: 35px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar2 {
width: 25px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar3 {
width: 15px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translate(0, -6px) rotate(40deg);
width: 35px;
}
.navbar.sticky .logo a span {
color: #fff;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: block;
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
position: relative;
color: #fff;
}
.navbar.sticky .menu li a:hover {
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<nav class="navbar">
<div class="max-width">
<div class="logo">Chhailbihari</div>
<ul class="menu">
<li class="menu-btn">Home</li>
<li class="menu-btn">About</li>
<li class="menu-btn">Services</li>
<li class="menu-btn">Skills</li>
<li class="menu-btn">Contact</li>
</ul>
<div class="menu-btn">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</nav>
i think you have make menu which is responsive - i.e. works on mobile also.
for this use #media screen css
show hamburger icon when width of window is like tab or mobile else hide this icon.
in menu div (mobile or tab) add close icon to close menu.
hope this solution helps
you may refer below code for navbar for mobile view with hamburger icon.
body
{
margin: 0;
padding: 0;
background: blue;
color: #cdcdcd;
}
#togglmenu
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#togglmenu a
{
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#togglmenu a:hover
{
color: tomato;
}
#togglmenu input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
#togglmenu span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#togglmenu span:first-child
{
transform-origin: 0% 0%;
}
#togglmenu span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#togglmenu input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#togglmenu input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#togglmenu input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
#togglmenu input:checked ~ ul
{
transform: none;
}
<nav role="navigation">
<div id="togglmenu">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Info</li>
<li>Contact</li>
</ul>
</div>
</nav>
I want to show different contents depending on the selected link, because for now all links take the same class which have only one content. I don't know how to add another div for another link using the same class or should I create a different class of each div/link ?
https://jsfiddle.net/sx6L93k1/16/
// Reveal & Close Panels
var revealPanel = function(buttonReveal, panel, buttonClose) {
$(document).ready(function() {
// Reveal panel
$(buttonReveal).on('click', function() {
$(panel).addClass('expanded');
console.log('hidefor-' + panel);
$(".content").addClass('hidefor-' + panel.substr(1));
$(".ip").addClass('hidefor-' + panel.substr(1));
});
// Close panel
$(buttonClose).on('click', function() {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-up');
$(".ip").removeClass('hidefor-panel-up');
});
// ESC to close Panel
$(document).bind("keydown", function(e) {
if (e.keyCode == 27) {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-up');
$(".ip").removeClass('hidefor-panel-up');
}
});
});
}
revealPanel('.reveal-up', '.panel-up', '.close');
revealPanel('.reveal-left', '.panel-left', '.close');
// Reveal Panel with Shortcuts
$(document).ready(function() {
$(document).bind("keydown", function(e) {
if (e.keyCode == 76) {
console.log(e.keyCode);
$('.panel-left').addClass('expanded');
}
if (e.keyCode == 82) {
$('.panel-up').addClass('expanded');
$(".content").addClass('hidefor-panel-up');
$(".ip").addClass('hidefor-panel-up');
}
});
});
.content {
padding: 50px;
position: absolute;
width: 90%;
-webkit-transition: all .7s ease;
transition: all .7s ease;
transform: scale(1);
opacity: 1;
bottom: 10%;
}
.content.hidefor-panel-up {
bottom: 20%;
transform: scale(0.95);
opacity: 0;
}
.ip {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
-webkit-transition: all 1s ease;
transition: all 1s ease;
opacity: 1;
top: 0;
opacity: 1;
z-index: -5;
position: absolute;
}
.ip.hidefor-panel-up {
opacity: 1;
top: 10%;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Lucida Console", Monaco, monospace;
background: #06113E;
line-height: 1.5em;
font-size: 15px;
overflow: hidden;
}
code {
border: 1px solid #dddddd;
background: #efefef;
border-radius: 3px;
padding: 3px 5px;
}
h1,
h2,
h3 {
margin-bottom: 0.5em;
}
ul {
margin: 30px 40px;
}
li {
margin: 5px 0;
}
.panel {
padding: 20px;
}
.panel-content {
position: relative;
/*background: #efefef;*/
padding: 30px 50px;
overflow-y: auto;
height: 100%;
}
.panel-content .close {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #ffffff;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-content .close:before {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #ffffff;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-left {
z-index: 10;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
left: -100%;
width: 45%;
}
.panel-left.expanded {
left: 0;
}
.panel-up {
z-index: 10;
position: fixed;
display: block;
bottom: 0;
-webkit-transition: all .7s ease;
transition: all 0.7s ease-out;
bottom: -20%;
width: 100%;
}
.panel-up.expanded {
bottom: 0;
}
.reveal-left {
float: left;
}
.reveal-up {
float: right;
}
.nav {
padding: 10px;
margin: 0 auto;
height: 10px;
width: 90%;
}
.nav button {
padding: 4px 6px;
}
.nav a {
font-weight: bold;
color: #222;
}
.bottom {
background: yellow;
display: block;
position: fixed;
width: 100%;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav" style="color:white;z-index:99999999;position:absolute;">
<a style="color:white;" href="#" class="reveal-up">First Panel</a>
<br>
<a style="color:white;" href="#" class="reveal-up">Second panel</a>
</div>
<div class="panel-up">
<div class="panel-content">
<div class="close"></div>
<p style="margin-bottom: 30px; color:white;">up Panel</p>
<div class="bottom">
Some content here.
</div>
</div>
</div>
<img class="ip" style="opacity:1; z-index:-5; position:absolute; transform: scale(1.2)" src="https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixlib=rb-1.2.1&w=1000&q=80">
<div class="content" style="color:white">
<h2 style="margin-top:10px;">Side Panels Test</h2>
<p>This is a prototype test to create two side panels that are controlled by CSS in terms of their animation. Click either the "Left Panel" or "Right Panel" buttons to reveal the panel. Then click on the <code>✖</code> close or use the keyboard shortcuts
as seen below:</p>
<ul>
<li><code>ESC</code> - Close all windows</li>
<li><code>L</code> - Open Right panel</li>
<li><code>R</code> - Open Left panel</li>
</ul>
</div>
I have been trying to build a search engine using basic HTML and CSS for my Uni but IE just doesnt seem to like text boxes. Works perfectly fine in Chrome and Edge but for some reason doesnt work well in IE.
Screenshots attached below.
Image in IE
Image in Chrome
Any help would be highly appreciated.
Code for the search box and the search text button:
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
}
/*
.search-box:hover ~ .category-box {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box:hover {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box {
position: absolute;
align-items: center;
top: 38%;
left: 50%;
text-decoration-color: white;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
width: 0px;
color: white;
visibility: collapse;
opacity: 0;
transition: width 1s, height 1s, transform 1s;
transition: opacity 1s;
}
*/
.search-box > ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box > ul li {
left: -10px;
margin: 0 0 10px 0;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box > ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box > ul li:hover {
color: red;
}
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy">
</ul>
</div>
</div>
Can you set 400px in .search-box class should be work
Try to add the height property for the .search-text, code as below:
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
height:58px;
}
The output as below:
Can I click on the hamburger menu and open it horizontally and verticaly at the same time..? You can see on the images what I exactly want basically I want an animation when I click on the hamburger so the logo moves to the far left and it all needs to be in the same speed. And social media needs to go verticaly.
Before clicking..
After clicking..
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background-image: url('https://www.3ctele.com/wp-content/uploads/2015/12/3c-gradient-background.png');
background-size: cover;
height: 100vh;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: transparent;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
right: 0;
width: 250px;
margin-top: 60px;
transform: translateX(+250px);
transition: transform 250ms ease-in-out;
background: transparent;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.6s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
right: 25px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
.logo-header {
width:50px;
position:absolute;
left: 40%;
top: 5px;
z-index: 100;
}
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label><a href="https://stackoverflow.com/"><span class="logo-header">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fe/CARTOON_NETWORK_logo.png" width=80px> </span> </a>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>About</li>
<li>Conatact</li>
<li>Support</li>
<li>Marketing</li>
<li>About</li>
<li>Contact</li>
<li>Blog<span>Follow us on Socials</span></li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
</div>
Thank you in advance
You can do it like this:
input[type=checkbox]:checked~.sidebarIconToggle~ a > .logo-header {
left: 0%;
transition: all 0.3s;
}
Also added transition: all 0.3s; to the class .logo-header
.logo-header {
transition: all 0.3s;
width: 50px;
position: absolute;
left: 40%;
top: 5px;
z-index: 100;
}
demo
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html,
body {
overflow-x: hidden;
height: 100%;
}
body {
background-image: url('https://www.3ctele.com/wp-content/uploads/2015/12/3c-gradient-background.png');
background-size: cover;
height: 100vh;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: transparent;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
right: 0;
width: 250px;
margin-top: 60px;
transform: translateX(+250px);
transition: transform 250ms ease-in-out;
background: transparent;
}
.sidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.6s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
right: 25px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
input[type=checkbox]:checked~.sidebarIconToggle~a>.logo-header {
left: 0%;
transition: all 0.3s;
}
.topMenu{
list-style:none;
float:right;
color:#fff;
margin-right: -270px;
}
.topMenu li{
display:inline;
}
input[type=checkbox]:checked~.sidebarIconToggle~.topMenu {
margin-right: 70px;
transition: all 0.3s;
}
.logo-header {
transition: all 0.3s;
width: 50px;
position: absolute;
left: 40%;
top: 5px;
z-index: 100;
}
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<a href="https://stackoverflow.com/"><span class="logo-header">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fe/CARTOON_NETWORK_logo.png" width=80px> </span>
</a>
<ul class="topMenu">
<li>about us</li>
<li>contact</li>
<li>support</li>
</ul>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>About</li>
<li>Conatact</li>
<li>Support</li>
<li>Marketing</li>
<li>About</li>
<li>Contact</li>
<li>Blog<span>Follow us on Socials</span></li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
</div>
I created a simple hamburger menu for my site, I just can not get it to close after clicking on a link and going to the anchor that I put in and that also closes when I click off the menu.
My HTML is:
$(document).ready(function() {
$('.navbar-fostrap').click(function() {
$('.nav-fostrap').toggleClass('visible');
$('body').toggleClass('cover-bg');
});
});
nav {
height: 60px;
text-align: center;
position: relative;
width: width:100%;
margin: auto;
z-index: 100000;
}
.navbar-default {
transition: 500ms ease;
background: transparent;
}
.navbar-default.scrolled {
background: rgba(28, 28, 28, 0.8);
}
a.title {
float: left;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
}
.title {
float: left;
display: inline-block;
padding: 0;
margin-top: 5px;
list-style: none;
height: 55px;
}
.nav-fostrap ul {
list-style-type: none;
margin-top: 5px;
padding: 0;
display: block;
float: right;
width: auto;
}
.nav-fostrap ul li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding-left: 15px;
padding-right: 15px;
margin-top: 0;
list-style: none;
height: 60px;
}
a.menu {
font-family: Montserrat, Arial;
font-weight: 700;
position: relative;
display: inline-block;
cursor: pointer;
padding: 8px 0;
margin-top: 14.5px;
margin-bottom: 10.5px;
color: #fff;
text-decoration: none;
height: 40px;
top: -10px;
}
a:hover.menu {
color: #fff;
text-decoration: none;
}
.menu a:before,
a:after {
content: '';
position: absolute;
width: 0%;
height: 2px;
bottom: -2px;
background: #fff;
}
.menu a:before {
left: 0;
}
.menu a:after {
right: 0;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:before {
background: #fff;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
.title-on-mobile {
display: none;
}
#media only screen and (max-width:768px) {
a.title {
float: none;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
width: 100%;
text-align: center;
position: fixed;
left: -50px;
}
.nav-fostrap {
background: #1c1c1c;
width: 200px;
height: 100%;
display: block;
position: fixed;
left: -200px;
top: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
margin: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
z-index: 105;
}
.nav-fostrap.visible {
left: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
z-index: 90;
}
.nav-bg-fostrap {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 60px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
background: transperant;
padding: 12px 0 0 10px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
z-index: 100;
}
.navbar-fostrap {
display: inline-block;
vertical-align: middle;
height: 50px;
cursor: pointer;
margin-top: 5px;
position: absolute;
top: 0;
left: 0;
padding: 12px;
z-index: 102;
}
.navbar-fostrap span {
height: 2px;
background: #fff;
margin: 5px;
display: block;
width: 20px;
}
.navbar-fostrap span:nth-child(2) {
width: 20px;
}
.navbar-fostrap span:nth-child(3) {
width: 20px;
}
.nav-fostrap ul {
padding-top: 50px;
}
.nav-fostrap li {
display: block;
}
.nav-fostrap li a {
display: block;
color: #505050;
font-weight: 600;
}
.nav-fostrap li:first-child:hover a {
border-radius: 0;
}
.cover-bg {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
<nav class="menu navbar navbar-default navbar-fixed-top">
<div class="headercontainer">
<a class="title" href="#seccao-inicio"><img src="img/logo.png" alt="logo" width="80" href="#" style="position: relative;margin-left: 12px; float:right; top:2.5px;position: relative;" /></a>
<div class='nav-fostrap'>
<ul class="menu">
<li><a class="menu" href="#seccao-historia" style="color: white;">História</a></li>
<li><a class="menu" href="#seccao-network" style="color: white;">Network</a></li>
<li><a class="menu" href="#seccao-fundadores" style="color: white;">Fundadores</a></li>
<li><a class="menu" href="contacto.html" style="color: white;">Contacto</a></li>
</ul>
</div>
<div class='nav-bg-fostrap'>
<div class='navbar-fostrap'> <span></span> <span></span> <span></span> </div>
</div>
</div>
</nav>
I am developing this site for a professional aptitude project of my course so any help was welcome. If anyone could help me I was very grateful, thank you.
You can use this part of code and also add any other logic you want.
$(document).click(function(e) {
var target = e.target;
if (
!$(target).is(".navbar-fostrap") &&
!$(target).parents(".navbar-fostrap").length &&
!$(target).parents(".nav-fostrap").length
) {
$(".nav-fostrap").removeClass("visible");
$("body").removeClass("cover-bg");
}
});
Full code here
$(document).ready(function() {
$(".navbar-fostrap").click(function() {
$(".nav-fostrap").toggleClass("visible");
$("body").toggleClass("cover-bg");
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is(".navbar-fostrap") &&
!$(target).parents(".navbar-fostrap").length &&
!$(target).parents(".nav-fostrap").length
) {
$(".nav-fostrap").removeClass("visible");
$("body").removeClass("cover-bg");
}
});
});
body {
background-color: red;
}
nav {
height: 60px;
text-align: center;
position: relative;
width: width:100%;
margin: auto;
z-index: 100000;
}
.navbar-default {
transition: 500ms ease;
background: transparent;
}
.navbar-default.scrolled {
background: rgba(28, 28, 28, 0.8);
}
a.title {
float: left;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
}
.title {
float: left;
display: inline-block;
padding: 0;
margin-top: 5px;
list-style: none;
height: 55px;
}
.nav-fostrap ul {
list-style-type: none;
margin-top: 5px;
padding: 0;
display: block;
float: right;
width: auto;
}
.nav-fostrap ul li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding-left: 15px;
padding-right: 15px;
margin-top: 0;
list-style: none;
height: 60px;
}
a.menu {
font-family: Montserrat, Arial;
font-weight: 700;
position: relative;
display: inline-block;
cursor: pointer;
padding: 8px 0;
margin-top: 14.5px;
margin-bottom: 10.5px;
color: #fff;
text-decoration: none;
height: 40px;
top: -10px;
}
a:hover.menu {
color: #fff;
text-decoration: none;
}
.menu a:before,
a:after {
content: '';
position: absolute;
width: 0%;
height: 2px;
bottom: -2px;
background: #fff;
}
.menu a:before {
left: 0;
}
.menu a:after {
right: 0;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:before {
background: #fff;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
.title-on-mobile {
display: none;
}
#media only screen and (max-width:768px) {
a.title {
float: none;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
width: 100%;
text-align: center;
position: fixed;
left: -50px;
}
.nav-fostrap {
background: #1c1c1c;
width: 200px;
height: 100%;
display: block;
position: fixed;
left: -200px;
top: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
margin: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
z-index: 105;
}
.nav-fostrap.visible {
left: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
z-index: 90;
}
.nav-bg-fostrap {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 60px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
background: transperant;
padding: 12px 0 0 10px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
z-index: 100;
}
.navbar-fostrap {
display: inline-block;
vertical-align: middle;
height: 50px;
cursor: pointer;
margin-top: 5px;
position: absolute;
top: 0;
left: 0;
padding: 12px;
z-index: 102;
}
.navbar-fostrap span {
height: 2px;
background: #fff;
margin: 5px;
display: block;
width: 20px;
}
.navbar-fostrap span:nth-child(2) {
width: 20px;
}
.navbar-fostrap span:nth-child(3) {
width: 20px;
}
.nav-fostrap ul {
padding-top: 50px;
}
.nav-fostrap li {
display: block;
}
.nav-fostrap li a {
display: block;
color: #505050;
font-weight: 600;
}
.nav-fostrap li:first-child:hover a {
border-radius: 0;
}
.cover-bg {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu navbar navbar-default navbar-fixed-top">
<div class="headercontainer">
<a class="title" href="#seccao-inicio"><img src="img/logo.png" alt="logo" width="80" href="#" style="position: relative;margin-left: 12px; float:right; top:2.5px;position: relative;" /></a>
<div class='nav-fostrap'>
<ul class="menu">
<li><a class="menu" href="#seccao-historia" style="color: white;">História</a></li>
<li><a class="menu" href="#seccao-network" style="color: white;">Network</a></li>
<li><a class="menu" href="#seccao-fundadores" style="color: white;">Fundadores</a></li>
<li><a class="menu" href="contacto.html" style="color: white;">Contacto</a></li>
</ul>
</div>
<div class='nav-bg-fostrap'>
<div class='navbar-fostrap'> <span></span> <span></span> <span></span> </div>
</div>
</div>
</nav>
Hope it helps.