I have such a layout:
I would like that when one clicks the orange button, the sidebar shrinks and leaves only the icons visible. And for the mobile should totally shrink and when one clicks the button only the icons should be visible. The behaviour should be like this but I don't understand how to make it work.
For now I have my header:
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#menu-toggle" onclick="toggle()"><i class="fa fa-bars"></i></a>
<a class="navbar-brand" href="#">...</a>
</div>
But I don't know how to make it collapse when one clicks.. Thanks
In a rough way you could assign 2 classes (one for the icon, one for the relative text) for example, class "icon" and class "text", and on button click, toggle (hide and show) the element with the class "text". Then in a callback you could animate the resizing of the sidebar.
Edit2: Improved example
$('#togglebutton').click(function() {
if ($(window).width() > 500) { //your chosen mobile res
$('.text').toggle(300);
} else {
$('.menu').animate({
width: 'toggle'
}, 350);
}
});
.wrapper { width: 100% }
.menu {
background: #222;
float: left;
display: block;
}
.icon { max-width: 1em }
.menu ul {
list-style-type: none;
margin: 0;
padding: 0.2em 0.5em;
}
.menu li { margin: 0 }
.menu a, .menu a:visited {
color: white;
text-decoration: none;
}
.text {
display: inline;
margin: 0;
}
.content { display: block; }
button { margin: 1em; }
#media only screen and (max-width: 500px) {
.text {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="menu">
<ul>
<li>
<a href="#">
<img class="icon" src="http://bit.do/iconUrl">
<p class="text">Text 1</p>
</a>
</li>
<li>
<a href="#">
<img class="icon" src="http://bit.do/iconUrl">
<p class="text">Text 2</p>
</a>
</li>
</ul>
</div>
<div class="content">
<button id="togglebutton">☰</button>
</div>
</div>
Hope it was useful to have a general idea of my suggestion.
Update 2019
Bootstrap 4
This is also possible in Bootstrap 4, but still requires extra CSS to handle the sidebar state.
https://www.codeply.com/p/e5IcpodgE2
Bootstrap 3
You can create an "off canvas" sidebar, and then use Bootstrap's responsive utility classes to toggle display of the icons.
<div class="wrapper">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
<ul class="nav" id="menu">
<li><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></li>
<li><i class="glyphicon glyphicon-list"></i> <span class="collapse in hidden-xs">Stories</span></li>
<li><i class="glyphicon glyphicon-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></li>
<li><i class="glyphicon glyphicon-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></li>
</ul>
</div>
<!-- main right col -->
<div class="column col-sm-9 col-xs-11" id="main">
<i class="fa fa-navicon"></i>
<p>
content...
</p>
</div>
</div>
</div>
https://www.codeply.com/p/uunNOeQAqo
Related
I need that on small devices (<992px) there was a class foot-active. And when we clicked on link "More" on large devices (>992px), class foot-active was not added as of now. I wrote function on resize, but it isn't work right. What's amiss?..................................................
if (jQuery(window).width() < 992) {
$(document).on('click', '.foot-title', function(e) {
if ($(this).parent().hasClass('foot-items')) {
$(this).parent().toggleClass('foot-active');
}
});
}
jQuery(window).bind('resize', function() {
$(document).on('click', '.foot-title', function(e) {
if ($(this).parent().hasClass('foot-items')) {
$(this).parent().toggleClass('foot-active');
}
});
});
html,
body {
margin: 0;
padding: 0;
}
.link {
text-decoration: none;
color: #ddd;
}
.menu {
display: none;
}
.foot-active .menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
<div class="foot-title">
More
</div>
<div class="menu">
<div class="menu-item">
<span class="link">Lorem 1</span>
</div>
<div class="menu-item">
<span class="link">Lorem 1</span>
</div>
<div class="menu-item">
<span class="link">Lorem 1</span>
</div>
</div>
<!-- .b-menu -->
</div>
<div class="foot-menu">
<div class="foot-title">
Link
</div>
</div>
When amending the UI for different viewport sizes you should use CSS Media Queries, not JS. They perform much better and make your JS code much simpler and semantic, not to mention the fact that the UI will not be broken if a user disables JS in their browser.
To achieve what you need you can have your jQuery code always toggle the class. You can then set the CSS to allow the class to affect the UI through a Media Query, something like this:
$(document).on('click', '.foot-title', function(e) {
$(this).closest('.foot-menu').toggleClass('foot-active');
});
html,
body {
margin: 0;
padding: 0;
}
.link {
text-decoration: none;
color: #ddd;
}
.menu {
display: none;
}
#media (max-width: 992px) {
.foot-active .menu {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
<div class="foot-title">
More
</div>
<div class="menu">
<div class="menu-item">
<span class="link">Lorem 1</span>
</div>
<div class="menu-item">
<span class="link">Lorem 1</span>
</div>
<div class="menu-item">
<span class="link">Lorem 1</span>
</div>
</div>
</div>
<div class="foot-menu">
<div class="foot-title">
Link
</div>
</div>
I'm trying to create a hover on MENU2,3 and submenu's like the hover on MENU 1&2.
I can only get the hover on the title class. I'm trying to get hover on .ui .accordion .item when the title class below does not have .active class is this possible?
$(".ui.accordion").accordion();
/*
.ui.accordion.item:hover {
background: rgba(255,255,255,.1);
color: #ffffff;
}
*/
.ui.menu .active.item:hover, .ui.vertical.menu .active.item:hover {
background-color: transparent;
}
.ui.inverted.menu .active.item {
background-color: transparent;
}
.ui.accordion.item > .title:NOT(.active):hover {
background: rgba(255,255,255,.1);
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.js"></script>
<div class="pusher">
<div class="container">
<div class="ui left fixed vertical inverted menu">
<div class="item">
<form method="POST" action="#">
<div class="ui fluid inverted transparent icon input">
<input type="text" name="search">
<i class="search icon"></i>
</div>
<input type="submit" value="Submit" style="display:none;">
</form>
</div>
<a class="item" href="#">MENU 1</a>
<a class="item" href="#">MENU 2</a>
<div class="ui accordion item inverted">
<div class="title item" style="padding: 0px;">
<i class="dropdown icon"></i> MENU 3
</div>
<div class="content">
<a class="item" href="#">SUBMENU 1</a>
<a class="item" href="#">SUBMENU 2</a>
</div>
</div>
<div class="ui accordion item inverted">
<div class="title item" style="padding: 0px;">
<i class="dropdown icon"></i> MENU 4
</div>
<div class="content">
<a class="item" href="#">SUBMENU 1</a>
<a class="item" href="#">SUBMENU 2</a>
</div>
</div>
</div>
</div>
http://jsfiddle.net/4mpb7cfx/303/
Try to override hover to default style when .active set
.ui.accordion.item > .title.active:hover {
//set default
}
.ui.accordion.item > .title:hover {
background: rgba(255,255,255,.1);
color: #ffffff;
}
I solved my own question
http://jsfiddle.net/4mpb7cfx/306/
.ui.accordion.item {
padding:0px;
}
.ui.accordion.item > .title {
padding: .78571em .95em;
}
.ui.menu .active.item:hover, .ui.vertical.menu .active.item:hover {
background-color: transparent;
}
.ui.inverted.menu .active.item {
background-color: transparent;
}
.ui.accordion.item > .title:NOT(.active):hover {
background: rgba(255,255,255,.1);
color: #ffffff;
}
.ui.accordion.item > .content > .item {
padding-left: 1.2em;
}
I'm trying to design a responsive page.
This is how it looks like in a wide browser.
It changes to the ff. when I make it narrow:
What I want to happen is this:
This is my code for it:
/**For Eample Only So the Icons are Visible*/
.navbar-ct-blue {
background: #1B96BF;
}
<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-piggy" style="color: white;"></i>
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-cash" style="color: white;"></i>
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-wallet" style="color: white;"></i>
</a>
</li>
</ul>
</div>
<!-- /.container-fluid -->
</nav>
I have looked at these links, but I couldn't find the answer. Please help.
How to prevent Bootstrap navbar from displaying in multiple lines without collapsing them into an icon
How to prevent a bootstrap navbar from collapsing when window resizing
Centering navbar buttons in bootstrap
You're seeing this happen since the nav-justified class only uses display:table-cell above 768px:
#media (min-width:768px) {
.nav-justified > li {
display: table-cell;
width: 1%
}
Here are two examples that solve this:
Using nav-justified:
.navbar.navbar-ct-blue {
background: #1B96BF;
border: 1px solid #1B96BF;
max-height: 50px;
line-height: 30px;
margin: 0;
}
.navbar.navbar-ct-blue .nav-justified > li {
display: table-cell;
width: 1%
}
.navbar.navbar-ct-blue .nav-justified > li > a {
color: white;
font-size: 30px;
}
.navbar.navbar-ct-blue .nav-justified > li > a:hover {
color: #00F2FF;
background: none;
}
<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li>
<a href="#">
<span class="pe-7s-piggy"></span>
</a>
</li>
<li>
<a href="#">
<span class="pe-7s-cash"></span>
</a>
</li>
<li>
<a href="#">
<span class="pe-7s-wallet"></span>
</a>
</li>
</ul>
</div>
</nav>
Using the Grid:
.navbar.navbar-ct-blue {
background: #1B96BF;
border: 1px solid #1B96BF;
margin: 0;
}
.navbar.navbar-ct-blue .nav-row span {
color: white;
padding: 20px 0;
font-size: 30px;
}
.navbar.navbar-ct-blue .nav-row span:hover {
color: #00F2FF;
}
<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-bottom navbar-ct-blue" role="navigation">
<div class="container">
<div class="row nav-row text-center">
<div class="col-xs-4">
<span class="pe-7s-piggy"></span>
</div>
<div class="col-xs-4">
<span class="pe-7s-cash"></span>
</div>
<div class="col-xs-4">
<span class="pe-7s-wallet"></span>
</div>
</div>
</div>
</nav>
To give the <li class="navbar-nav"> is obviously wrong. Removing that could fix it. Additionally, as Tasos said inline-block for the list item should do it. Sure, look in the corresponding media query.
2 problems when trying to implement this:
Putting it in the body breaks the sticky nav.
Scroll bar on div.
If i try to do http://keithclark.co.uk/articles/pure-css-parallax-websites/ in a div. It causes a scrollbar in that div.
Trying to counter it by putting it in the body directly breaks the sticky nav (made using bootstrap).
Here is the pen http://codepen.io/dam0/pen/zviHr that I tried to do also. Similar concept.
I only need a parallax on a div. The different element speed type. Any help?
Here's the html structure i have. Please take a look. I already some put comments there.
I'm trying to make it Pure CSS as long as possible. But if it can't be done, help me with js.
EDIT: Added a Pen
http://codepen.io/anon/pen/qZVEgM
Adding the .parallax to the div i want to have a parallax effect causes it to have scrollbar. Putting the parallax class to the body will break the position:fixed of the sticky nav.
EDIT 2: Moved the pen code here
HTML:
<div class="parallax holder">
<div id="carousel" class="parallax__layer parallax__back carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://loremflickr.com/1920/1080/vegetable,healthy,plate" class="img-responsive center-block">
</div>
<div class="item">
<img src="http://loremflickr.com/1920/1080/vegetable,healthy,plate" class="img-responsive center-block">
</div>
</div>
</div>
<div id="headerCaption" class="parallax__layer parallax__layer--base">
<img src="http://healthyaxcess.ph/img/CaptionBg.png" id="curve" class="img-responsive center-block">
</div>
</div>
<div id="nav-wrapper">
<nav class="navbar navbar-inverse navbar-static-top" id="navbar-main">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://healthyaxcess.ph/img/logo.png"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-shopping-cart"></i> Cart</li>
<li><i class="fa fa-user"></i> Sign Up/Login</li>
</ul>
<!-- Nav links -->
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
<ul class="nav navbar-nav" id="nav-section">
<li class="current active">
First Section
</li>
<li>
Second Section
</li>
<li>
Third Section
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Dropdown link 1</li>
<li>Dropdown link 2</li>
<li>Dropdown link 3</li>
</ul>
</li>
</ul>
</div><!-- End of navbar collapse -->
</div><!-- End of Container Fluid -->
</nav>
</div>
<div class="container main">
<div class="text-center" id="section-2">
<h1>Sample Title</h1>
<p>The sample title's description here.</p>
</div>
CSS:
.navbar-inverse {
background: #303030;
}
#navbar-main {
margin: 0;
}
/* To override the static-top */
#navbar-main.affix {
position: fixed;
top: 0;
width: 100%;
}
#media (min-width: 992px) {
#navbar-main .navbar-nav {
position: relative;
margin-top: 16px;
}
}
.main {
/* for example only */
min-height: 200px;
}
.navbar-brand {
padding: 0;
/* firefox bug fix */
height: 80px;
}
.navbar-brand>img {
height: 100%;
padding: 8px;
/* firefox bug fix */
width: auto;
position: relative;
}
#footerBox {
background-color: #303030;
color: #FAFAFA;
}
.holder {
display: none;
}
#headerCaption {
position: relative;
}
#headerCaption img {
z-index: 3;
position: absolute;
width: 100%;
}
.carousel {
position: relative;
}
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
}
JS:
$('#carousel img').on("load", function(){
$('body').scrollspy({ target: '#navbar-collapse' });
$('.holder').css('display', 'block');
$('#nav-wrapper').height($("#navbar-main").height());
$('#navbar-main').affix( { offset:{ top:$('#navbar-main').offset().top } } );
$('.carousel').carousel({pause: false});
})
I have set up custom
I have set up a new breakpoint so that the mobile menu appears at 1200px with the following css:
#media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
the issue is that when I get to that breakpoint the mobile menu always collapses and never reveals,
Here is the markup:
<nav class="navbar navbar-inverse a-1-navbar a-1-navbar-shadow" role="navigation" id="a-1-main-menu">
<div class="container">
<div class="navbar-header a-1-navbar-header">
<button type="button" class="navbar-toggle a-mobile-toggle" data-toggle="collapse" data-target="#a-menu" style="float:left;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand a-1-logo-wrapper" href="#" style="float:right;">
<img class="hidden-xs a-1-logo" src="life.png" alt="">
<img class="visible-xs a-1-logo" src="life.png" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="a-menu" >
<ul class="nav navbar-nav navbar-right a-menu-bar">
<li class="active"> Vehicles <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Specials <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Finance & Insurance <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Servicing <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Parts <span class="glyphicon glyphicon-chevron-down"></span></li>
<li> Contact <span class="glyphicon glyphicon-chevron-down"></span></li>
</ul>
</div>
</div>
Is some custom JavaScript needed?
I've tested your code and there's no problem in revealing collapsed items.
Perhaps you should check the following thing first:
Did you include jQuery?
Did you include Bootstrap3 js resource?
Did you include collapse plugin in your Bootstrap3 js resource?
For Bootstrap3 you need to add more lines in your css
While there's no problem hiding collapsed items, it DOES have problem when showing the dropdown list. The problem is you miss out this:
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
Here's the example on Codepen.