I've built my project in bootstrap which has a top navigation bar and a sidebar.
Now I need to make sidebar, collapsible like this:
http://www.makerstudios.com/
But sidebar in my project is on left side of the page. How can I make this sidebar collapsible with minimum possible changes?
HTML:
<div class="col-md-3">
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav">
<ul class="nav" id="side-menu">
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
You could use a simple jquery.
First you need to set up the sidebar to be off-screen though. This can be done by adding a
.sidebar {
left: -300px // For example
}
Then you need to make a jquery code, that listens on clicks on the button you want to be bring out the menu.
When the button is pressed, the jquery code should make the sidebar displayed again, and bring it to a visble range (left:0;)
<script>
$(function(){
$("#menu").click(function open(){
$('.sidebar').animate({ left: '0'}, 500);
});//opening it
$("#close").click(function close(){
$('.sidebar').animate({ left: '-200px'}, 500);
});// 'Closing it'. Takin it back off -screen within the timewindow of 500ms
});
</script>
So what you would have to do now, is setup the bar off-screen, and then create a buttons for your opening/closing.
This solution will make the sidebar go on top of the existing body, but if you would like it do be the same way as it is on the site you've linked, you just have to add a command to the jquery to move the content-partion(visible part) the same amount as the sidebar moves.
Related
I am having a problem with make "table of content" expand and collapse with a button in Bootstrap 4.
Here is my code:
https://codepen.io/nht910/pen/RwwwyKB
Snippet:
<div class="main-wrapper col-12">
<div class="post-wrapper">
<div class="post-body d-flex">
<div class="post-content">
<p>...</p>
</div>
<div class="post-toc">
<!-- this table of content i use Boostrap-TOC to auto generate: https://afeld.github.io/bootstrap-toc-->
<nav class="sticky-top" id="toc"></nav>
</div>
</div>
</div>
</div>
Can you guys please help me to put "table of contens" inside a colapse button and when clicked it we have animation like the images below.
Thank you guys so much.
To animate the side menu you have to make a transformation and slide the menu using translateX(100%);. You can then add a transition: all 300ms; to have a sliding effect.
You will also need to change the side menu width as you are sliding, so the content fills the space of the side menu.
I think I achieved the effect you wanted, Example below:
https://codepen.io/diogoperes/pen/NWWWMYW
I added some animation with jQuery, as well as added the button and some Bootstrap classes, to bring your main content at the center.
Here's the jQuery method:
$(function() {
$("#toc-button").click( function() {
$(".post-toc").stop(true).animate({width:'toggle'}, 400);
});
});
Example here: https://codepen.io/evelyng/pen/XWWWqYg
Okay, so I have this weird issue on my website which I might have a hard time explaining. I am working on a website which only has one page(index.html) and no scroll. I have a navbar on the left with some menu items. So when clicked on a menu item a box appears with content. As it is a single page no scroll website, I have used IDs to call those boxes. Please see the code below:
<div class="nav-content">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
when clicked on a menu item this kind of section appears on the screen.
<section class="content show background-overlay" id="about">
<div class="aboutUs">
<h1>About Us</h1>
<div class="overflow-scroll">
Lorem ipsumasfasfasfasfafafsafs
</div>
</div>
</section>
And the browser address bar shows something like this after clicking on the links:
file:///C:/Users/zak/Desktop/web/project1/index.html#home
or
file:///C:/Users/zak/Desktop/web/project1/index.html#gallery
Now I have used a modal box inside the gallery content section and after I close the modal box, the page does not stay at the gallery content section but reloads.
For example:
Modal box is here:
file:///C:/Users/zak/Desktop/web/project1/index.html#gallery
After modal is closed:
file:///C:/Users/zak/Desktop/web/project1/index.html (which is the home content section)
I want the gallery section to stay open even if I close the modal.
For the modal, I have not used any JS or jQuery. It is pure HTML and CSS. To get rid of the issue I have tried a simple jquery code:
$('#modal_close').click(function(e) {
e.preventDefault();
return false;
});
This code just stops everything working.
Can anybody tell me how to stop the page from reloading after the modal box is closed?
You can try to use hide event to make refresh.
$('#modal_close').on('hide', function() {
window.location.reload();
});
I am having an issue which i would like to solve. i have created a menu for an ecommerce site. The menu works fine. Unfortunately i cannot copy the whole code here cos it is too much but i made a short version and a picture to present the structure of the menu.
The main concept is when a button is clicked on the main nav a dropdown menu opens which has 2 columns. The left site has further buttons and the right side is where the div containers will be shown depending on the active list item on the left side. That is where the issue occours.
Because the container opens by hovering on the list item not by clicking it. When the mouse is over the li it gets highlighted but when the mouse is out the highlight color disappears.
I would like to keep the active li item highlighted until the mouse hovers on another li item.
Somehow i should get the row(item) which is hovered, change the css class for highlighted and keep until another row gets hovered. Then remove the css class and do the same with the new active list.
Hope i mad it clear. :-)
here are the html codes and the structure.
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="button1"> </a>
<div class="dropdown-menu">
<div class="col-sm-3">
<ul class="submenu-list">
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="col-sm-9" id="submenubox1">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
<div class="col-sm-9" id="submenubox2">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
The code im trying is the following using the menu.aim javascript:
<script src="jquery.menu-aim.js" type="text/javascript"></script>
<script>
var $menu = $(".dropdown-menu");
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
function activateSubmenu(row) {
var $row = $(row);
// Keep the currently activated row's highlighted look
$row.find("a").addClass("maintainHover");
}
function deactivateSubmenu(row) {
//remove the row's highlighted look
$row.find("a").removeClass("maintainHover");
}
</script>
however this code is not working. Im am not sure if this would be the right way to solve this thought.
Also i have tried to use to css code:
ul.class li:hover{
background-color: red !important;
}
But this is not working either.
Here is a similar example what iam trying to achieve.
https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html
Any help would be appropriated.
Thank you!
Use jQuery to add an active class to the hovered item -
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(this).parent().find('.submenu-list-item.active').removeClass('active');
$(this).addClass('active');
});
This will add active class only when hovered over items of the same parent i.e. same submenu
Somewhat I can understand your question. I have tried this plugin. It may satisfy your need.
Bootstrap Submenu
Thanx for all replies.
With the help of Rohit answer I made it work.
However I had to change a line.
$(this).parent().find('.submenu-list-item.active').removeClass('active');
this line was not working for me unfortunatelly.
It did not remove the highlighted item once another got hovered on. Instead of this I removed the class from all items(a) in the ul.
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(".submenu-list a").removeClass();
$(this).addClass('active');
});
Anyway thanks for the bootstrap answer as well. I will learn some new stuffs from there.
I am trying to create a simple web ui with semantic ui.
I want a sidebar with a menu in it in some items will have subitems... Shouldn't be that hard hu?
http://jsfiddle.net/ycm8ctfx/
<div class="ui vertical menu sidebar teal">
<div class="menu">
<a class="item" target="_blank" href="http://semantic-ui.com/modules/dropdown.html">
Example
</a>
<div class="ui left pointing dropdown link item">
<i class="dropdown icon"></i>
Messages
<div class="menu">
How do I get the sub-items to "fly-out" of the sidebar over the normal page content? If you click "Messages" within the example, the menu will appear (watch the scrollbar at the bottom to appear) but since those are children of the sidebar, they are being shown within the sidebar. But I want them to float over the normal content! I didn't get it to work via fiddle with the z-index.
if sidebar is configured to use overlay transition it can be fixed by specifying
.ui.sidebar {
overflow: visible !important;
}
taken from here http://jsfiddle.net/59174tt1/2/
It's the combination of position:fixed and overflow on .ui.sidebar. This article might help: http://css-tricks.com/popping-hidden-overflow.
An alternative might be to use an accordion to keep everything within the sidebar.
I downloaded Fancybox pluging from http://fancyapps.com/fancybox and used for open my gallery images in popup.
and also I used fixed navigation when scrolling.
My problem is, when I click on images, it will open in a popup window. It is ok.
But, fixed navigation menu is still appear on the popup window.
![problem][1]
Navigation Menu HTML
<div class="nav-container">
<div id="nav">
<ul>
<li>Home</li>
<li>shop</li>
<li>Gallery</li>
<li>Facilities</li>
<li>Terms</li>
<li>Contact</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
Navigation Menu Javascript
jQuery("document").ready(function($){
var nav = $('.nav-container');
$(window).scroll(function () {
if ($(this).scrollTop() > 136) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
Because of that navigation, user can't close the popup window.
Guys,
please help me to solve this.
Your navigation menu is probably set as position: fixed. This makes it have a z-index which is, by default, above every position:static placed elements (which is the default).
What you should do is edit the CSS of the lightbox so it has position: relative which should make it go above your navigation (assuming it's later in the DOM).
If it's still showing up below your navigation, check what the z-index of your f-nav class is, and change the z-indexof your lightbox so it's higher than the one of the navigation.