The source I am using is: http://startbootstrap.com/template-overviews/simple-sidebar/
I am having trouble making it so that I can have two of these simple sidebars. I am trying to make it so there is one on each side of the page (one on the left and one on the right). Right now, the default is for the sidebar to be on the left side. Each sidebar will be activated by 2 separate buttons.
**Note in < div id="wrapper" > -- change to < div id="wrapper" class="toggled">
You can add another sidebar to the right by adding the menu in html page and its corresponding styles in the CSS.
HTML:
<!-- Right - Sidebar -->
<div id="sidebar-wrapper-right">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Right toggle
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
CSS:
#sidebar-wrapper-right {
z-index: 1000;
position: fixed;
right: 250px;
width: 0;
height: 100%;
margin-right: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Look at the working JS fiddle here: DEMO
you need to add different style to your side bar in a the sidebar-wrapper class, something like this.
#sidebar-wrapper{
margin-left: 80%;// change this for your own properties
left: 20%
}
Related
Have a sidebar on my website but when I load the page it plays the animation of it closing. how would I stop this?
I have a class #sidebar thats the class in its normal state and a class active that makes it move out
#sidebar {
margin-left: -250px;
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 0;
background: #222222;
color: #fff;
transition: 0.3s;
visibility: hidden;
}
#sidebar.active {
width: 250px;
margin-left: 0px;
transition: 0.3s;
z-index: 999;
visibility: visible;
}
Javascript for changing the active class
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
UPDATE
Html code for the sidebar. if it helps I am using mustache js for templating if that is of importance to this
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Admin Panel</h3>
</div>
<ul class="list-unstyled components">
<p>Admin controls</p>
<li>
Menu's
<ul class="collapse list-unstyled" id="menuSubmenu">
<li>
Add
</li>
<li>
Edit
</li>
</ul>
</li>
<li>
Categories
<ul class="collapse list-unstyled" id="catSubmenu">
<li>
Add
</li>
<li>
Edit
</li>
</ul>
</li>
<li>
Dish's
<ul class="collapse list-unstyled" id="dishSubmenu">
<li>
Add
</li>
<li>
Edit
</li>
</ul>
</li>
<li>
Staff
<ul class="collapse list-unstyled" id="staffSubmenu">
<li>
Register
</li>
<li>
Delete
</li>
</ul>
</li>
<li>
Site settings
</li>
<li>
<a id="logout" href="/logout" class="btn btn-primary">Sign out</a>
</li>
</ul>
</nav>
Can you try below CSS
#sidebar {
position: absolute;
top: 0;
left: -250px;
bottom: 0;
width: 250px;
height: 100vh;
z-index: 999;
background: #222222;
color: #fff;
transition: 0.3s;
}
#sidebar.active {
left: 0;
}
Plus you have to pass active class to your sidebar also if you want to be active by default
<nav id="sidebar" class="active">
I have a Navbar which makes a transition when I scroll down.
When I scroll up, the transition doesn't work and I don't know why. Can someone help me resolve this?
The JS code is adding the scrolled class when Math.round($(window).scrollTop()) > 100.
#supports (position: sticky) {
body {
padding-top: 0;
}
header {
position: sticky;
}
}
.scrolled {
transition: 0.5s ease;
}
.scrolled.header {
height: 50px;
background-color: rgba(0, 0, 0, 0.8);
transition: 0.5s ease;
}
.scrolled.header .header-menu {
line-height: 40px;
transition: 0.5s ease;
}
<div class="block">
<header class="header">
<i class="fas fa-signal"></i>NAME
<nav class="header-menu">
Accueil
Compétences
Parcours
Projets
Hobbies
Contact
</nav>
<a href="#" class="toggle" id="burgerButton">
<i class="fas fa-bars"></i>
</a>
</header>
</div>
If I understand correctly : When you scroll down you add the .scrolled class, and when you move up you remove it ?
If so, you should also add the transition : 0.5s ease; to the nav-bar itself. Because when you remove the .scrolled class, why would a transition occure if the nav haven't this specified in it's css ?
I'm currently stuck on how to assign links (internal .html links) to those .button:nth-child() class in CSS. The only way i knew to add links is via <a href=""> in HTML, but it only works with the first nth:child, as you can see. Any solution (including Js), is very much appreciated.
html
<input type="checkbox" name="check" id="check"/>
<label for="check" id="tog"></label>
<div id="menu">
<a href="index.html">
<span class="button"></span>
</a>
<span class="button"></span>
<span class="button"></span>
<span class="button"></span>
</div>
css
#check:checked ~ #menu .button:nth-child(1)
{
background-image: url("pictures/homeicon.png");
background-repeat:no-repeat;
background-position: center center;
background-size: cover;
top: 8.6%;
z-index: 100;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
transition: all 0.1s ease;
}
#check:checked ~ #menu .button:nth-child(2)
{
background-image: url("pictures/portfolio.png");
background-repeat:no-repeat;
background-position: center center;
background-size: cover;
top: 17.1%;
z-index: 90;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#check:checked ~ #menu .button:nth-child(3)
{
background-image: url("pictures/abouticon.png");
background-repeat:no-repeat;
background-position: center center;
background-size: cover;
top: 25.7%;
z-index: 80;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#check:checked ~ #menu .button:nth-child(4)
{
background-image: url("pictures/connect.png");
background-repeat:no-repeat;
background-position: center center;
background-size: cover;
top: 34.2%;
z-index: 70;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
Thanks very much.
From what I understand of your question, one way to achieve this is by adding simple Javascript on each of your "button".
<!doctype HTML>
<html>
<head>
<script src="jquery-3.2.1.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<input type="checkbox" name="check" id="check"/>
<label for="check" id="tog"></label>
<div id="menu">
<a href="index.html">
<span class="button">button</span>
</a>
<span class="button" onclick="location.href='http://google.com';">button2</span>
<span class="button" onclick="location.href='http://yahoo.com';">button2</span>
<span class="button" onclick="location.href='http://duckduckgo.com';">button2</span>
</div>
</body>
</html>
The onclick="location.href='<some internal link>';" allows you to redirect where you want.
<input type="checkbox" name="check" id="check"/>
<label for="check" id="tog"></label>
<div id="menu">
<a href="index.html">
<span class="button"></span>
</a>
<a href="index2.html">
<span class="button"></span>
</a>
And so on actually not clear about your question . Just add anchors to all the buttons right
I dont understand about assign link as you said and what you want todo.
But i understand a litle what you want.
1. If you want give a links on all span with class button, you can give an anchors for all.
Here is example :
<div id="menu">
<a href="index.html">
<span class="button"></span>
</a>
<a href="index2.html">
<span class="button"></span>
</a>
<span class="button"></span>
</div>
2. If you want give all span with url without anchor,
Here is example :
<div id="menu">
<span class="button" onclick="wimdow.location.href='index1.html'"></span>
<span class="button" onclick="wimdow.location.href='index2.html'"></span>
<span class="button" onclick="wimdow.location.href='index3.html'"></span>
</div>
If you want add link via jquery, here is example :
$("#menu").children($('.button')).eq(0).click(function(){
$('.button').eq(0).html('Link');
});
$("#menu").children($('.button')).eq(1).click(function(){
$('.button').eq(1).html('Link2');
});
$("#menu").children($('.button')).eq(2).click(function(){
$('.button').eq(2).html('Link3');
});
/* Or you can use this */
$(".button").each(function(i,el){
$(this).eq(i).html('Link'+i+'');
});
I have been struggling to get my head around this for over a week now and I think my main problem is that I don't know where I should be looking.
Basically what I want to create is a navigation area that is on the left side of the page. The person who I am building the website for has given me a TON of navigation elements (seriously there's about 25-30) that they would like.
I have managed to categorise them into proper headers and sub-headers but now I'm faced with the problem that I just don't know how to build in the dropdown functionality.
I'm very new to web development and this is a great challenge to take on but I don't know where to start.
I have watched hours of tutorial vids talking about how to build navbars that are top aligned, that pop out on top of the content etc but none that "slide" open (if that makes sense) so that when you click on an element, the other links below it slide down to make room for the sub-headers.
Here is what I have so far (it's a bit of a mess I know) have mercy!
http://www.fabio-felizzi.com/
It's just so I can show you what I mean by the styling of the navigation area.
I've found myself wrapped up in a giant knot with this particular problem and could really use some help even if it's just a point in the right direction.
I have tried to search for threads which have this particular problem but nothing has really hit the nail on the head so to speak, I apologise if I've missed something.
Many Thanks
Here is the HTML that contains the navbar
<!-- Sidebar -->
<nav id="sidebar-wrapper">
<img src="img/logo.png" alt="People's Centre for Change">
<ul class="sidebar-nav">
<li>About Us
<ul class="dropdown-wrapper">
<li>About Us</li>
<li>Our Journey</li>
<li>Where We Are Going</li>
</ul>
</li>
<li>What We Do</li>
<li>The Building</li>
<li>Volunteer With Us</li>
<li>Get Involved</li>
<li>Unique Products</li>
<li>Donate</li>
<li>Contact Us</li>
<li>Calendar</li>
</ul>
</nav>
and here is the Javascript
//handle menu clicks and animate loading in of new content
$('ul.sidebar-nav li a').click(function () {
var toLoad = $(this).attr('href');
$('#ajax-content-wrapper').load('html/' + toLoad + '.php', function(){
$('#ajax-content-wrapper').hide('slow',loadContent);
function loadContent() {
$('#ajax-content-wrapper').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#ajax-content-wrapper').show('slow');
}
$('.bxslider').bxSlider();
});
return false;
});
//hide/display sidebar nav
$("#menu-toggle").click(function (e){
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
//hide/display dropdown nav
$("#dropdown-toggle").click(function (e){
e.preventDefault();
e.stopPropagation();
$(".dropdown-wrapper").toggleClass("dropdownDisplayed");
});
});
I have yet to get to the CSS as frankly I've run into a brick wall with this and my brain has kind of short circuited. I'm now at the stage where I'm so confused with all of this that I wouldn't even be able to explain my work.
Here are some adjustments to your code to factor in submenu's and a somewhat improved mobile setup.
It simply uses the Bootstrap Toogle that normal nav menus use.
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
body,
html {
height: 100%;
overflow: hidden;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
.btn-default#menu-toggle,
.btn-default#menu-toggle:hover,
.btn-default#menu-toggle:focus {
border: none;
outline: none;
box-shadow: none;
background: none;
color: #419ca6;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
overflow-x: hidden;
background: #419ca6;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #ddd;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #444;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav .sidebar-brand {
text-align: center;
}
.sidebar-nav ul {
list-style: none;
list-style-position: outside;
padding: 0;
margin: 0;
}
.sidebar-nav ul > li {
font-size: 13px;
}
.sidebar-nav ul > li > a {
color: #ddd;
text-decoration: none;
padding-left: 10px;
}
.sidebar-nav ul > li > a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.6);
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<img src="http://www.fabio-felizzi.com/img/logo.png" alt="People's Centre for Change">
</li>
<li> Home
</li>
<li> About Us<span class="caret"></span>
<ul id="drop1" class="collapse" data-parent="#sideNavParent">
<li>About Us
</li>
<li>Our Journey
</li>
<li>Where We Are Going
</li>
</ul>
</li>
<li>What We Do
</li>
<li>The Building
</li>
<li>Volunteer With Us
</li>
<li>Get Involved
</li>
<li>Unique Products
</li>
<li>Donate
</li>
<li>Contact Us
</li>
<li>Calendar
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper"> <span class="glyphicon glyphicon-th-list"></span>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>People's Centre for Change</h1>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
If you want to use panel for drop down menu you may try what Peter Geerts said. If you ar looking for old traditional fly out menu then this basic example may be helpful for you.
<nav id="sidebar-wrapper"> <img src="img/logo.png" alt="People's Centre for Change">
<ul class="sidebar-nav">
<li id="dropdown-toggle">
About Us
<ul class="dropdown-wrapper">
<li>About Us
</li>
<li>Our Journey
</li>
<li>Where We Are Going
</li>
</ul>
</li>
<li>What We Do
</li>
<li>The Building
</li>
<li>Volunteer With Us
</li>
<li>Get Involved
</li>
<li>Unique Products
</li>
<li>Donate
</li>
<li>Contact Us
</li>
<li>Calendar
</li>
</ul>
</nav>
#sidebar-wrapper {
background:teal;
width:200px;
}
#sidebar-wrapper a {
color:#fff;
text-decoration:none
}
#dropdown-toggle ul {
background:red;
width:200px; /*Adjust as per requirement*/
position:absolute;
left:150px; /*Adjust as per requirement*/
top:50px; /*Adjust as per requirement*/
display:none
}
#dropdown-toggle:hover ul {
display:block
}
<nav id="sidebar-wrapper">
<img src="img/logo.png" alt="People's Centre for Change">
<ul class="sidebar-nav">
<li id="dropdown-toggle">About Us
<ul class="dropdown-wrapper">
<li>About Us</li>
<li>Our Journey</li>
<li>Where We Are Going</li>
</ul>
</li>
<li>What We Do</li>
<li>The Building</li>
<li>Volunteer With Us</li>
<li>Get Involved</li>
<li>Unique Products</li>
<li>Donate</li>
<li>Contact Us</li>
<li>Calendar</li>
</ul>
</nav>
Helpful Bootstrap based resources from where you may learn more in details.
Fiddle
Simple Sidebar Menu
bootsnipp
I'm building a site using the twitter bootstrap CSS, but I've run into a problem.
nav bar example
If you look towards the end, "Bootstrap" is sort of hidden; it only lights up when you mouseover it (but it is, by default, black). How do I get this functionality for a button in my webpage?
Here's my navbar:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li class="">
Tutoring
</li>
<li class="">
Competitions
</li>
<li class="">
Board Members
</li>
<li class="">
Info
</li>
<li class="">
<span class="span5"></span>
</li>
<li class="" id="algebrayall">
<a class="brand pull-right" style="color:black" href="./index.html">It's just algebra, y'all</a>
</li>
</ul>
</div>
</div>
</div>
</div>
I want the <a class="brand pull-right" style="color:black" href="./index.html">It's just algebra, y'all</a> part to work like their Bootstrap button.
It's not part of Bootstrap.css. It is part of the twitter documentation website css (docs.css).
This is the base brand styling:
body > .navbar .brand {
padding-right: 0;
padding-left: 0;
margin-left: 20px;
float: right;
font-weight: bold;
color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
And the hover effect:
body > .navbar .brand:hover {
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);
}
.navbar-inverse .brand:hover, .navbar-inverse .nav > li > a:hover, .navbar-inverse .brand:focus, .navbar-inverse .nav > li > a:focus {
color: #ffffff;
}
There might be some more styling that makes up the full effect, but that should get you started.
The problem is you are overriding the text color of brand using inline style which overrides the bootstrap styles
Instead of using inline styling for changing the color of brand, use a class
.navbar-inverse.navbar .brand {
color: black;
}
Demo: Fiddle
Important
But I think the correct solution will be to create a custom version of bootstrap by changing the #navbarBrandColor property to what ever you want instead of manually overriding the style in your css file