I'm using bootstrap3. Having said that, I'm open to implementing my requirement in pure javascript or Jquery or any other similar frameworks.
I'm looking to implement a sidebar on the left hand side of the page. The sidebar needs to be invisible. However a handle like picture to show that something can be clicked is a must. When the user clicks on this handle type image, the sideber needs to float out. The sidebar will have a bunch of options on it which the user can choose which will later act as a filter to the contents on the page. Once the work is done, if the user clicks anywhere outside of the sidebar, the sidebar needs to slide back into it's place.
I like the example here - http://startbootstrap.com/template-overviews/simple-sidebar/ However, it doesn't float on top of the existing content, instead, pushes out the content & also doesn't have a handle type stuff I'm after, instead uses a button.
Could I please request some guidance here?
First off there are several different off-canvas menu plugins for jquery. Here is one that may be helpful jquery off canvas push navigation. Or you can check out this page with multiple plugins Jquery off canvas menus.
If you don't want to use a plugin you can do this with a very tiny jquery code and some css. First you need to create a menu button and a menu and give the menu a negative margin so it is hidden. Then you should wrap you body content in a div so that you can easily move it over when the menu is open. Then you just need to use jquery toggleClass to toggle the body to have a class of menu-open when when your button is clicked, a nav link is clicked and when the menu is open your main content is clicked.
Fiddle demo Fiddle
Here is the jquery:
$( document ).on( "click", ".menu-button, .menu ul li a, .menu-open .content-wrapper", function() {
$( 'body' ).toggleClass( "menu-open" );
});
The html:
<div class="menu-button">
<span class="menu-layer first"></span>
<span class="menu-layer second"></span>
<span class="menu-layer third"></span>
</div>
<nav class="menu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
<div class="content-wrapper">
<h1>Body Content</h1>
<p>Here is you main content</p>
</div>
And the css:
body{
overflow-x: hidden;
}
.menu{
width: 300px;
height: 100%;
position: fixed;
left: -300px;
top: 0;
background: #000;
z-index: 99;
-ms-transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.menu ul{
list-style-type:none;
padding: 0;
margin: 0;
}
.menu ul li{
width: 100%;
margin: 1px 0;
}
.menu ul li a {
width: 100%;
display: block;
padding: 15px;
background: #111;
color: #fff;
font-size: 16px;
}
.content-wrapper {
padding: 20px;
padding-top: 80px;
width: 100%;
min-height: 100vh;
-ms-transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
/*menu button styles*/
.menu-button {
width: 100px;
height:75px;
text-align:center;
position:fixed;
left:0;
top:0;
z-index: 99;
background: #111;
-ms-transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.menu-button:hover {
cursor:pointer;
cursor: hand;
}
.menu-button .menu-layer {
border-radius: 1px;
display: block;
height: 1px;
position: absolute;
width:50%;
left:25%;
background:#fff;
-ms-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.menu-button .menu-layer.first { top: 25%;}
.menu-button:hover .menu-layer.first {top:30%; }
.menu-open .menu-button .menu-layer.first {
top: 50%;
left: 35%;
width:30%;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-button .menu-layer.second { top: 45%;}
.menu-open .menu-button .menu-layer.second {
opacity: 0;
left: 0;
}
.menu-button .menu-layer.third { top: 67%;}
.menu-button:hover .menu-layer.third {top:62%; }
.menu-open .menu-button .menu-layer.third {
top: 50%;
left: 35%;
width:30%;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*menu open styles */
.menu-open .menu{
left: 0;
}
.menu-open .menu-button {
left: 300px;
}
.menu-open .content-wrapper {
margin-left: 300px;
}
Related
hello this is my nav menu code i've added animation like a dot move along when i hover over my nav menu. but i don't know how to make that dot to be static in the active menu .
ex: (menu1) this is my menu , when it'active i want that dot beside my menu (menu1.) like this kind of i want
if anyone find the solution please give me the code
body {
font-family: "Sprint Sans Ofc";
}
.navMenu {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
White-space:nowrap;
padding-right:20px;
padding left:30px;
}
.navMenu a {
color: #000000;
text-decoration: none;
font-size: 1.3em;
text-transform: captilalize;
font-weight: 600;
display: inline-block;
padding:30px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navMenu a:hover {
color: #000000;
}
.navMenu a:active {
color:#000000;
}
.navMenu .dot {
width: 5px;
height: 5px;
background: #D61E39;
border-radius: 50%;
opacity: 0;
margin:-44px;
-webkit-transform: translateX(30px);
transform: translateX(30px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navMenu a:nth-child(1):hover ~ .dot {
-webkit-transform: translateX(30px);
transform: translateX(145px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(2):hover ~ .dot {
-webkit-transform: translateX(110px);
transform: translateX(280px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(3):hover ~ .dot {
-webkit-transform: translateX(200px);
transform: translateX(415px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(4):hover ~ .dot {
-webkit-transform: translateX(285px);
transform: translateX(550px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
navMenu a:nth-child(1):active ~ .dot {
position: relative;
left:40px;
bottom:10px;
opacity: 1;
}
.navMenu a:nth-child(1):active ~ .dot {
left:20px;
opacity:1;
}
<body>
<nav class="navMenu">
menu1
menu2
menu3
menu4
<div class="dot"></div>
</nav>
</body>
The challenge with your .dot element is to apply the CSS styles (especially the transform values) in a way, that both hover and active states are handled correctly.
In order to achieve this, I'm using CSS selectors like this one:
.navMenu a:nth-child(2):hover~.dot,
.navMenu:not(:hover) a:nth-child(2).active~.dot {
Basically, this means, do the animation if either
the element is currently being hovered
or the link is active (i.e. it was clicked before), BUT with the limitation that the parent .navMenu is currently not being hovered.
The second rule guarantees, that a hover has the highest priority when setting the destination of the .dot element (especially, this makes the dot move away from the currently active item). Otherwise, the dot wouldn't move and stick to the .active menu item.
Check out my approach below (btw, no need for -webkit properties here):
const anchors = document.querySelectorAll('nav a')
anchors.forEach(anchor => anchor.addEventListener("click", onClick));
function onClick(e) {
anchors.forEach(achor => achor.classList.remove('active'))
e.target.classList.add('active')
}
body {
font-family: "Sprint Sans Ofc";
}
.navMenu {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
White-space: nowrap;
padding-right: 20px;
padding left: 30px;
}
.navMenu a {
color: #000000;
text-decoration: none;
font-size: 1.3em;
text-transform: captilalize;
font-weight: 600;
display: inline-block;
padding: 30px;
transition: all 0.2s ease-in-out;
}
.navMenu a:hover {
color: #000000;
}
.navMenu a:active {
color: #000000;
}
.navMenu .dot {
width: 5px;
height: 5px;
background: #D61E39;
border-radius: 50%;
opacity: 1;
margin: -44px;
transform: translateX(-30px);
transition: all 0.2s ease-in-out;
}
.navMenu a:nth-child(1):hover~.dot,
.navMenu:not(:hover) a:nth-child(1).active~.dot {
transform: translateX(145px);
}
.navMenu a:nth-child(2):hover~.dot,
.navMenu:not(:hover) a:nth-child(2).active~.dot {
transform: translateX(280px);
}
.navMenu a:nth-child(3):hover~.dot,
.navMenu:not(:hover) a:nth-child(3).active~.dot {
transform: translateX(415px);
}
.navMenu a:nth-child(4):hover~.dot,
.navMenu:not(:hover) a:nth-child(4).active~.dot {
transform: translateX(550px);
}
<body>
<nav class="navMenu">
menu1
menu2
menu3
menu4
<div class="dot"></div>
</nav>
</body>
I am doing a "hamburger" menu, responsive style, with a menu that will cover the page the viewer is at.
I got all HTML/CSS figured out, but I wanted to add fade in and fade out effects.
Fade in works with jquery code but the menu isn't fading out. Already tried some ideas that were on SO but none works.
Any help? Fiddle: https://jsfiddle.net/f19kz640/
Sorry for bad eng...
HTML
<header>
<div id="topbar"> <!-- top bar -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="menu">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
</div>
</header>
CSS
body{
background-color: #000;
}
#menu{
z-index: 5;
width: 100%;
height: 100%;
background-color: rgba(0,0,0, 0.95);
position: fixed;
font-size: 1.5em;
text-align: center;
right: 0px;
top: 0px;
opacity: 0;
display: table;
}
.hidden{
display: none;
visibility: none;
}
#menu ul{
margin: 0;
padding: 0;
z-index: 10;
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
#menu ul li{
cursor: pointer;
text-decoration: none;
}
#menu ul li:hover{
background-color: #006973;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu ul a{
letter-spacing: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #fff;
list-style: none;
text-transform: uppercase;
padding: 0px;
line-height: 75px;
padding: 10px 700px;
text-decoration: none;
}
#menu ul a:hover{
text-decoration: none;
color: #fff ;
}
#nav-icon {
z-index: 20;
width: 50px;
height: 35px;
position: relative;
margin: 35px 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 40px;
background: #bada33;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 12px;
}
#nav-icon span:nth-child(4) {
top: 24px;
}
#nav-icon.open span:nth-child(1) {
top: 8px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 8px;
width: 0%;
left: 50%;
}
Javascript/JQuery
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
if($('#menu').css('opacity') == '0'){
$('#menu').css('opacity','1');
$('#menu').fadeIn(300).css('display','table');
}else{
$('#menu').css('opacity','0');
$('#menu').fadeOut(300).css('display','none');
}
});
});
You could easily simplify things a great deal:
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
$('#menu').fadeToggle(300);
});
});
Updated Fiddle
There's no reason to play with opacity properties or display properties, it's all part of the jQuery fade() function, which you can merely toggle.
I have a responsive navigation menu, it works as follows: when you resize the window the 'hamburger' (three lines) an icon appears. Clicking this icon makes the menu appear and the icon becomes an 'X' icon by transforming. Clicking the 'X' makes the menu disappear and the icon become three lines again.
It works perfectly in Safari and Firefox, however it doesn't in Chrome.
It makes the transformation of three lines to 'X' and viceversa but the menu never appears.
Why is that?
Here's the code:
HTML:
<nav>
<label for="show-menu" class="show-menu">
<button class="show-menu button-toggle-navigation">
<span>Toggle Navigation</span>
</button>
</label>
<input type="checkbox" id="show-menu" role="button">
<ul>
<li>Conóceme</li>
<li>Servicios</li>
<li>Portfolio</li>
<li>Contacto</li>
</ul>
</nav>
[...]
<script type="text/javascript">
$('button').on('click', function() {
$(this).toggleClass('isActive');
});
</script>
CSS:
/*Style 'show menu' label button and hide it by default*/
.show-menu {
float: right;
width: 0;
height: 0;
text-align: right;
display: none;
margin-right: 15%;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ ul{
border-top-color: black;
float: right;
text-align: center;
display: block;
padding-top: 15%;
}
.button-toggle-navigation {
background-color: transparent;
border: 0;
border-bottom: 0.25em solid black;
border-top: 0.25em solid black;
font-size: 13px;
cursor: pointer;
height: 1.5em;
margin: .75em .375em;
outline: 0;
position: relative;
-webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
transition: border-color 150ms ease-out, transform 150ms ease-out;
width: 2.25em;
}
.button-toggle-navigation::after, .button-toggle-navigation::before {
border-bottom: 0.25em solid black;
bottom: .375em;
content: '';
height: 0;
left: 0;
position: absolute;
right: 0;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.button-toggle-navigation span {
color: transparent;
height: 0;
width: 0;
overflow: hidden;
position: absolute;
}
.isActive {
border-color: transparent;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.isActive::after, .isActive::before {
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive::after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.isActive::before {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
Thanks a lot for your help!
P.S: If you could tell me a better way to do this responsive menu, I'd appreciate it! Thanks! :)
Sure!
This is how I solved the problem:
HTML
<nav>
<label for="show-menu"xs class="show-menu">
<button id="pull" class="show-menu button-toggle-navigation"></button>
</label>
<ul>
<li>Conóceme</li>
<li>Servicios</li>
<li>Portfolio</li>
<li>Contacto</li>
</ul>
</nav>
JS
<script type="text/javascript">
var menu = $("nav ul");
$('#pull').on('click', function() {
$(this).toggleClass('isActive');
menu.slideToggle(200);
});
</script>
CSS
/*Style 'show menu' label button and hide it by default*/
.show-menu {
margin-top: 7%;
float: right;
display: block;
}
.button-toggle-navigation {
background-color: transparent;
border: 0;
border-bottom: 0.16em solid black;
border-top: 0.16em solid black;
font-size: 1em;
cursor: pointer;
height: 1.2em;
margin: .75em .375em;
outline: 0;
position: relative;
-webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
transition: border-color 150ms ease-out, transform 150ms ease-out;
width: 2.25em;
}
.button-toggle-navigation::after, .button-toggle-navigation::before {
border-bottom: 0.16em solid black;
bottom: .375em;
content: '';
height: 0;
left: 0;
position: absolute;
right: 0;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive {
border-color: transparent;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.isActive::after, .isActive::before {
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive::after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.isActive::before {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
if you non't hide your button with CSS, the code is working perfectly:
.show-menu {
float: right;
text-align: right;
margin-right: 15%;
}
http://jsfiddle.net/4towu13r/
better if you use the -webkit-, -moz, -o- transition prefixes to.
UPDATE:
explanation: somehow chrome unable to activate <button> inside the <label>, if you click only on <label> the checkbox is checked and do the job. Here is a jQuery workaround to do the job:
checkbox=$('input[role=button]');
checkbox.prop('checked', !checkbox.prop('checked'));
working code: http://jsfiddle.net/eapo/4towu13r/3/
I have a navbar. On hover of any of it menu item I want to have the exact same effect of border-bottom animation as in here (See how the border or menu items at the top-left animates when you hover them.)
I tried to find similar asked questions on stackoverflow and also on google but I didn't find anything helpful.
Any help is really appreciated.
Well, it was as easy as inspecting the web with the developer tools. What they do in that page is to create an element inside the menu using the :before pseudo-element. On hover they use CSS transforms (scale) to change the length.
jsfiddle.
span
{
display: inline-block;
padding: 6px 0px 4px;
margin: 0px 8px 0px;
position: relative;
}
span:before
{
content: '';
position: absolute;
width: 100%;
height: 0px;
border-bottom: 1px solid black;
bottom: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
}
span:hover:before
{
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
You can't have the border a different length to the element that it surrounds. However you can achieve a similar effect using just CSS - with a pseudo element. How about something like the following:
div:after{
position:absolute;
bottom:0;
left:50%;
height:1px;
width:0%;
background-color:#444;
display:block;
content:'';
transition:0.3s;
}
div:hover:after{
left:0;
width:100%;
}
JSFiddle
Its not border-bottom, it is done using css pusedo element :before
.navigation li a::before {
position: absolute;
bottom: -1px;
left: 0;
content: "";
width: 100%;
height: 1px;
background-color: #fff;
display: block;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
transform: scaleX(0);
}
.navigation li a::before {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
transform: scaleX(1);
}
I have a div that have img with id and another div inside it
I want to hide the info div (you can see in code) on load of the page and then show it again on hover of the img - I also want the info div to slide right nicely..
Thanks in advance for helping :)
the HTML
<div class="wrapper">
<img id="logo" src="img/logo.png" alt="logo">
<div id="info">
info- blah <br>
blah & blah .<br>
email#gmail.com
</div>
</div>
The CSS
.wrapper{
float: left;
opacity: 0.4;
margin-top: -30px;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#logo {
width: 39px;
}
.wrapper:hover{
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
}
What is the jQuery I need for this?
Here's one way to do it.
I don't know if that's what you wanted, but since you're already using CSS3, you don't need jQuery for that:
.wrapper {
float: left;
opacity: 0.4;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
overflow:visible;
position:relative;
}
.wrapper:hover {
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
opacity:0;
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
left:50%;
position:absolute;
top:0;
}
.wrapper:hover #info {
left:100%;
opacity:1;
}
http://jsfiddle.net/Y2B2v/
Place your .wrapper with the same image height. Place an overflow:hidden to hide text which is under.
After you must just change height in .wrapper:hover to show the text.
If you want a nice transition, you can adjust that with
.wrapper:hover{
opacity: 0.6;
height:100px;
transition: height 1;
-webkit-transition: height 1s; /* Safari */
}
like this : http://jsfiddle.net/AW9qh/2/