I would like to create a menu like the screenshot
the red arrow means when I click on the button it will either show /
hide the menu
the orange arrow means when menu is hide the box should increase the
width, and vice versa
So far I have created the html, the problem is
1) the sliding effect seems not exactly what I expected, it slide after the content is show , but what I would like to achieve is hide and slide at same time
$("#menu_btn").on("click", function () {
var menu = $("#left_menu #btn");
if (menu.css('display') !== "none") {
$("#left_menu #btn").hide("slide", {direction: "left"}, 1000);
} else {
$("#left_menu #btn").show("slide", {direction: "right"}, 1000);
}
});
2) how to combine the code to extend / decrease width after the slide effect, and the box is absolute in the container , can I keep the same top after the content expend / reduce?
$(".content #bg").css("width","600");
$(".content #bg").css("width","1000");
Thanks for helping.
Something like this may work:
https://jsfiddle.net/7k4kdmxu/4/
CSS:
.container{width:100%; margin:0 auto;}
nav{
width:20%;
float:left;
background:#efefef;
}
.openNav{ width:20%;}
#content.openNavContainer{ width:80%!important;}
.closeNav{width:10%;}
#content.closeNavContainer{ width:90%!important;}
#content{
width:80%;
float:right;
background:#e9e9e9;
}
nav ul {list-style:none;}
nav ul li{list-style:none; display:block;}
HTML
<div class="container">
<nav>
Open ->
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>OUT VALUE</li>
<li>SEASONAL</li>
<li>CONTACT</li>
</ul>
<- Close
</nav>
<div id="content"><p>Body Content Can Go Here</p></div>
</div>
JS/JQ
$(function(){
$("#open").click(function(){
$("nav").addClass("openNav");
$("nav").removeClass("closeNav");
$("#content").addClass("openNavContainer");
$("#content").removeClass("closeNavContainer");
});
$("#close").click(function(){
$("nav").addClass("closeNav");
$("nav").removeClass("openNav");
$("#content").addClass("closeNavContainer");
$("#content").removeClass("openNavContainer");
});
});
Related
I am trying the giva a menu slides in/out effect to give the main content more space whenever user wants - More like the Google Calendar hamburger menu click behaviour.
I am trying to have two divs side-by-side. 1st is menu, 2nd is other content. Using jQuery UI I am trying toggle slide the 1st div.
Two issues -
Only when I give fixed width to 2nd div, I am able to place them side-by-side.
How to make the second div takes rest of the space?
Only after completion of the slide-out 2nd div adjust its width.
How to make increase the width smoothly?
Here is the code https://codepen.io/coder92/pen/Yjomwd
$(document).ready(function(){
//adds click function to the hamburger menu
$( "#menu" ).click(function() {
$(".menuDiv").toggle('slide');
});
});
.menuDiv{
background-color: green;
width:200px;
float:left;
}
.contentDiv{
//width:100%;
width:500px;
color:white;
background-color:blue;
float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span id="menu"> toggle </span>
<div>
<div class="menuDiv">
Menu
</div>
<div class="contentDiv">
<table>
<tr>
<td> data </td>
</tr>
</table>
</div>
</div>
Thanks in advance!
For the smooth sliding you can use
$(".menuDiv").animate({width: 'toggle'}, 350);
And to make the data take up the rest of the page
Remove float: left; from .contentDiv (Float makes the element not take full size)
Add margin: 0 auto; (This makes the data take the full rest of the page)
Add overflow: hidden (this stops the blue from going under the green)
Check it out: https://codepen.io/Funce/pen/QBeLOr
The way Google Calendar do it is to utilize a combination of flex display, hidden overflow and negative margin to achieve the effect. You may refer to the sample below:
$(document).ready(function(){
//adds click function to the hamburger menu
$("#menu").click(function () {
var $menu = $(".menuDiv");
if ($menu.is(':visible')) {
$menu.animate({'margin-left':-200}, function() {
$menu.hide();
});
} else {
$menu.show().animate({'margin-left':0});
}
});
});
.containerDiv {
display: flex;
overflow-x: hidden;
}
.menuDiv{
background-color: green;
width:200px;
}
.contentDiv{
color:white;
background-color:blue;
float:left;
flex:1 1 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span id="menu"> toggle </span>
<div class="containerDiv">
<div class="menuDiv">
Menu
</div>
<div class="contentDiv">
<table>
<tr>
<td> data </td>
</tr>
</table>
</div>
</div>
Note that I use the jQuery animate method, while Google Calendar use the CSS transition for theirs.
I have a navigation bar that changes into a button with a slidetoggle function after a certain breakpoint and I've got this bit of jquery that handles it. In that mobile layout, it also makes the toggled navigation slide back up after an item was clicked.
jQuery(document).ready(function($){
/* prepend menu icon */
$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$(".nav").slideToggle("slow");
$(this).toggleClass("active");
});
if (document.documentElement.clientWidth < 860) {
$(".navitem").on("click", function(){
$(".nav").slideToggle("slow");
$(this).toggleClass("active");
});
} });
The problem is, that my .nav hides after being clicked all the way up to width of 876. I suspect that this is due to the scrollbar, but I have no clue how to fix it. The site has a single-page layout so it's kind of important that the navbar stays there.
Any ideas?
Try this: http://jsfiddle.net/0bbjn46g/ although it doesn't replicate the problem. What happens in chrome (and all webkit browsers I assume) is that .nav disappears after clicking on one of the items while width is 861-876.
I'm just going to take a stab at your problem throw my dart blindly but:
Your issue (from what I understand) is that your nav items disappear at a certain point. I'm assuming that they disappear when you shrink your window down to the mobile button menu and you click on it to hide the menu then resize the window, the navigation items are gone.
An easy solution to that is to force your nav menu to be display: block !important; when the browser size is bigger than the mobile: http://jsfiddle.net/0bbjn46g/6/
jQuery(document).ready(function($){
/* prepend menu icon */
$('#nav-wrap').prepend('<div id="menu-icon"><a><img id="navicon" src="img/navicon.svg"></a></div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$(".nav").slideToggle("slow");
$(this).toggleClass("active");
});
if (document.documentElement.clientWidth < 860) {
$(".navitem").on("click", function(){
$(".nav").slideToggle("slow");
$(this).toggleClass("active");
});
}
});
#media screen and (min-width: 861px) {
#menu-icon {
display: none;
}
.nav {
display: inline;
}
.nav {
display: block !important; /** note: when window is bigger than 861, force nav to show **/
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="menu-icon"><a>menu</a></div>
<div class="nav" id="home">
<ul>
<li><a class="navitem" href="#">item 1</a></li>
<li><a class="navitem" href="#">item 2</a></li>
<li><a class="navitem" href="#">item 3</a></li>
<li><a class="navitem" href="#">item 4</a></li>
</ul>
</div>
</body>
I am using Sidebar.js and would like to add an CSS opacity setting to the main container section when the sidebar is revealed. (Similar to hypebeast.com when you click the three bar icon).
I not sure whether to add an overlay div and then hide/show it with jQuery or whether a function can be added to the sidebar js to do it (this seems the way to go).
I would like to control the opacity with CSS but if it's in the js then that's fine as well.
Any help welcomed.
My html:
<div class="wrapper jsc-sidebar-content jsc-sidebar-pulled">
<nav>
</nav>
<section>
<!--content with opacity on clicking above nav-->
</section>
</div>
<nav class="sidebar jsc-sidebar" id="jsi-nav">
<!-- nav bar content -->
</nav>
Side bar js and jquery
<script src="js/lib/jquery.min.js"></script>
<script src="js/sidebar.js"></script>
<script>
$('#jsi-nav').sidebar({
trigger: '.jsc-sidebar-trigger',
scrollbarDisplay: true,
pullCb: function () { console.log('pull'); },
pushCb: function () { console.log('push'); }
});
$('#api-pull').on('click', function (e) {
e.preventDefault();
$('#jsi-nav').data('sidebar').push();
});
$('#api-push').on('click', function (e) {
e.preventDefault();
$('#jsi-nav').data('sidebar').pull();
});
</script>
demo - http://jsfiddle.net/victor_007/79sb2rq9/
add and remove class for wrapper and using pseudo add a overlay
.wrapper.overlay {
position:relative;
}
.wrapper.overlay:before {
content:'';
background:black;
opacity:.5;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
z-index:1;
}
I want to do this(photoshop image) on my page:
On hover(over the ACTORS link) I want the yellow drop down list(where Fotis J.Colakides etc is) to show up slowly. From up till down.
I don't know what is the best way to do this on my page.
Of course I have to use an unorder list() like this:
<ul id="showInfoNav">
<li><a class="slideBtn" href="#">MEDIA</a>
<ul class="slideShow">
<li>assa</li>
</ul>
</li>
<li><a class="slideBtn" href="#">ACTORS</a>
<ul class="slideShow">
<li>ACTOR1</li>
<li>ACTOR2</li>
</ul>
</li>
</ul>
[Update]
Util now I have done this: (http://jsfiddle.net/bMGhC/)
But I am doing it from css. I have the left:-9999px; and on hover I am doing it left:0px;
I want to do it slideDown. But it is not working.
here is my css:
ul#showInfoNav
{
list-style:none;
float:left;
width:100%;
}
ul#showInfoNav li
{
float:left;
margin-right:50px;
position:relative;
}
ul#showInfoNav a.slideBtn
{
padding:5px;
display:block;
text-decoration:none;
}
ul#showInfoNav ul a:hover{
color:#898989;
}
/*--- DROPDOWN ---*/
ul#showInfoNav ul
{
background-color:#F4F9B6;
padding:50px 10px 10px 10px;
list-style:none;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
position: absolute;
top:-20px;
/*z-index:-1;*/
}
ul#showInfoNav ul li
{
float:none;
}
ul#showInfoNav ul a{
white-space:nowrap;
}
ul#showInfoNav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
I have also this z-index problem. If I set it -1 it is hidden behind the image too.
Check out jQuery UI effects, specifically slide():
http://docs.jquery.com/UI/Effects/Slide
You could also look into the slideToggle() method that jQuery supplies.
See an example here.
Similar functions would be slideUp(), slideDown() and the more general, animate()
Take a look at .hover(), and .slideUp/Down(). You can also replace .hover with .toggle in the following code, if you'd like a more 'permanent' state. The key to both is utilizing their callback functions.
HTML
Click to see a list
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
jQuery
$('ul').hide(); // doing this rather than via CSS for a fail-safe for JS
$('a').hover(function() {
$('ul').slideDown('fast');
}, function() {
$('ul').slideUp('slow')
})
When using jQuery fadeIn() you can specify the duration too.
Some simple sample would be:
Give the li's some id or class ( <li id="actor1">soemthing</li>)
In the JS file or script tag use:
$("#actor1).hover(function(){ $(this).slideDown('slow')}, function(){ $(this).slideUp('slow') });
EDIT: I see that you want a sliding effect so, I changed fadeIn() and fadeOut() to slideDown() and slideUp(). You can read their documentation here
This is the solution I found, I used this because I didn't want the <ul> to slideUp when I was navigating among his <li> tags.
$('ul.slideShow').hide();
$("#showInfoNav li").click(function () {
$(this).find('ul.slideShow').slideDown('fast').show();
$(this).hover(function () { // PARENT
}, function () {
$(this).parent().find("ul.slideShow").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
});
I am using offset() to get the current position of an image just after a UL. I am positing the image absolutely so that it hangs off the first li as a pointer. When any li is clicked i want the image to slide to that particular li.
The first time i click on a li it slides to the centre of the page. But then when i make subsequent clicks it moves the proper distance, only in the centre of the page because its already been set incorrectly.
I hope this makes sense.
Here is my HTML
<ul id="llist">
<li class="t current"><span>solutions</span><img src="images/bg-tab-leader-arrow.png" width="24" height="53" title="pointer" class="pointer" /></li>
<li class="m"><span>credit mangement solutions</span></li>
<li class="b"><span>third party additions</span></li>
</ul>
and my JS to date (which also nicely fades out tabs)
$('#llist li').click(function() {
var thisTop = $(this).offset().top;
$('.pointer').animate( {'top': thisTop} );
return false;
});
CSS:
#subheader { position:relative; }
#subheader #llist { float:left; width:286px; margin:0 0 18px 0; padding:0; list-style:none; }
#subheader #llist li { color:#005474; line-height:68px; height:70px; background:url(../images/bg-tab-leader.png) no-repeat; position:relative; }
#subheader .pointer { z-index:1000; position:absolute; top:9px; right:-22px; }
Any ideas on why this positions itself in the centre of the page when i first click instead of just sliding it to the relative LI would be greatly appreciated.
I'm a little bit confused by this line:
var thisTop = $('#llist').offset().top;
...since it gets the top position of the llist, not the <li> that was clicked.
If I change it to:
var thisTop = $(this).offset().top;
...it seems to work fine.
Example: http://jsfiddle.net/patrick_dw/hxAzW/1/
EDIT:
The issue may be that you need to use .position() instead of .offset(), so that it uses the relative position of the <li> within the container.
EDIT:
Also looks like you need to give relative positioning to the container llist.