Working on Vertical Navigation bar found here:
Codeply
My code is the following:
<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<style>
html, body {
height: 100%;
}
.wrapper, .row {
height: 100%;
margin-left: 0;
margin-right: 0;
}
.wrapper:before, .wrapper:after,
.column:before, .column:after {
content: "";
display: table;
}
.wrapper:after,
.column:after {
clear: both;
}
#sidebar {
background-color: #eee;
padding-left: 0;
float: left;
min-height: 100%;
}
#sidebar .collapse.in {
display: inline;
}
#sidebar > .nav > li > a {
white-space: nowrap;
overflow: hidden;
}
#main {
padding: 15px;
left: 0;
}
/*
* off canvas sidebar
* --------------------------------------------------
*/
#media screen and (max-width: 768px) {
#sidebar {
min-width: 44px;
}
#main {
width: 1%;
left: 0;
}
#sidebar .visible-xs {
display: inline !important;
}
.row-offcanvas {
position: relative;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.row-offcanvas-left.active {
left: 45%;
}
.row-offcanvas-left.active .sidebar-offcanvas {
left: -45%;
position: absolute;
top: 0;
width: 45%;
}
}
#media screen and (min-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left.active {
left: 3%;
}
.row-offcanvas-left.active .sidebar-offcanvas {
left: -3%;
position: absolute;
top: 0;
width: 3%;
text-align: center;
min-width: 42px;
}
#main {
left: 0;
}
}
</style>
<script>
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
$('.collapse').toggleClass('in').toggleClass('hidden-xs').toggleClass('visible-xs');
});
</script>
<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="fa fa-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></li>
<li><i class="fa fa-list"></i> <span class="collapse in hidden-xs">Stories</span></li>
<li><i class="fa fa-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></li>
<li><i class="fa fa-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></li>
<li>
<i class="fa fa-list"></i> <span class="collapse in hidden-xs">Menu <span class="caret"></span></span>
<ul class="nav nav-stacked collapse left-submenu" id="item1">
<li>View One</li>
<li>View Two</li>
</ul>
</li>
<li>
<i class="fa fa-list"></i> <span class="collapse in hidden-xs">Menu <span class="caret"></span></span>
<ul class="nav nav-stacked collapse" id="item2">
<li>View One</li>
<li>View Two</li>
<li>View Three</li>
</ul>
</li>
<li><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link</span></li>
</ul>
</div>
<!-- /sidebar -->
<!-- main right col -->
<div class="column col-sm-9 col-xs-11" id="main">
<p><i class="fa fa-navicon fa-2x"></i></p>
<p>
Main content...
</p>
</div>
<!-- /main -->
</div>
</div>
</body>
</html>
Fiddle
I am not getting the same functionality. My code doesn't show carets for menu dropdowns. Also All menu items have a hyperlink mouseover effect while the original sample does not have it.
Can someone help me to understand what I am doing wrong?
Thanks
you just need to change the version of bootstrap to 3.7.7 which is the stable one
use this links instead
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Related
I am trying to figure out a way to combine an animated hamburger menu in bootstrap 4 with a full screen menu overlay. Problem: when I set data-toggle="modal" on the button, I get the modal overlay but the animation of the collapsed hamburger menu ("X") in the background (i.e. underneath the overlay) becomes inactive.
On the other hand, when I replace the "modal" attribute with "collapse", the hamburger animation works fine but the overlay menu does not appear.
Is there a simple way to combine these two functions?
This is the CSS:
body {
padding-top: 5rem;
margin: 0;
background: url(../assets/original/test.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
.base-layout {
padding: 3rem 1.5rem;
text-align: center;
}
/* Navbar responsive toggler + hamburger animation */
.navbar-toggler {
border: none;
background: transparent !important;
float: left !important;
margin-left: 15px;
margin-right: 0;
}
.navbar-toggler:focus {
outline: none;
background: transparent !important;
}
.navbar-toggler .icon-bar {
background-color: #fff;
transform: rotate(0deg) translate(0px, 0px);
transition: ease all .2s;
}
.navbar-toggler .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggler .icon-bar+.icon-bar {
margin-top: 4px;
}
/*.icon-bar:nth-child(2) {
width: 16px;
transition: ease all .2s;
}*/
.navbar-toggler:hover>.icon-bar:nth-child(2) {
width: 22px;
transition: ease all .2s;
}
.navbar-toggler:active>.icon-bar:nth-child(2) {
width: 22px;
transition: ease all .2s;
}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
transform: rotate(45deg) translate(5px, 4px);
transition: ease all .2s;
}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
opacity: 0;
transition: ease all .2s;
}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
transform: rotate(-45deg) translate(4px, -4px);
transition: ease all .2s;
}
/* Modal */
.modal-nav-content {
width: 100%;
height: auto;
}
.modal-nav-body {
margin-top: 100px;
}
.modal-nav-body ul {
list-style-type: none;
color: white;
margin: 0;
padding: 0;
width: 100%;
}
.modal-nav-body ul li {
text-align: center;
font-size: 130%;
padding: 8px;
text-transform: uppercase;
}
This is the HTML code:
<head>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-dark bg-transparent fixed-top">
<span class="navbar-brand" href="#"></span>
<!-- data-toggle="modal" :: COLLAPSE -->
<button type="button" class="navbar-toggler collapsed btn-open" data-toggle="modal" data-target="#nav-modal" aria-controls="nav-modal" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
<span class="sr-only">Toggle navigation</span>
</button>
</nav>
<!-- Modal -->
<div class="modal fade" id="nav-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-nav-content">
<div class="modal-nav-body">
<ul class="wrap-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav menu item #1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav menu item #2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav menu item #3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav menu item #4</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<main role="main" class="container">
<div class="base-layout text-white text-left">
<h1>Title</h1>
<p class="lead">Lead text...</p>
</div>
</main>
<!-- Bootstrap core JavaScript placed at the end of the document so the pages load faster -->
<script src="https://bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
I want the menu to slide out when I hover over a button. Somehow I it only works when I add the hover effect to the menu itself, not to a button. All I could find online was the same (hover effect was attached to the menu that should slide out, not a button). How can I implement that?
jsfiddle: https://jsfiddle.net/codingcodingcoding/tuhug8x8/
html:
<span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span>
<nav id="navigation">
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</nav>
css:
.icon:hover#navigation {
left: 0;
}
.icon {
left: 0px;
}
#navigation {
position: fixed;
width: 200px;
height: 300px;
background-color: red;
top: 0;
left: -200px;
}
html
<span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span>
<nav id="navigation">
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</nav>
css:
.icon:hover + #navigation {
left: 0;
}
.icon {
left: 0px;
}
#navigation {
position: fixed;
width: 200px;
height: 300px;
background-color: red;
top: 0;
left: -200px;
}
Here, I have added just + selector olny.
You may use the + or ~ CSS selector if you want to keep your current HTML structure like this :
.icon:hover + #navigation {
left: 0;
}
.icon {
left: 0px;
}
#navigation {
position: fixed;
width: 200px;
height: 300px;
background-color: red;
top: 0;
left: -200px;
}
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span>
<nav id="navigation">
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</nav>
You can read more about
#navigation should be a child element of the icon container (which in your case is the span element) in order to be able to select it on hover. You just have to move the closing span tag as shown below.
(I used an image instead of the icon here n the snippet, but in the fiddle, you'll see the icon: https://jsfiddle.net/qLy4g8sL/1/ )
.icon {
left: 0px;
}
#navigation {
position: absolute;
width: 200px;
height: 300px;
background-color: red;
top: 0;
left: -200px;
}
.icon:hover #navigation {
left: 0;
}
<span class="glyphicon glyphicon-home icon" style="font-size:40px;"><img src="http://placehold.it/50x50">
<nav id="navigation">
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</nav>
</span>
I am using bootstrap 4, and I have a navbar for small screens, where I would like a search input group to take the width from left all the way to the right, where I have the menu bar icon. I have made a JSFiddle here. How can I make the input group be flexible and take the remaining space that is on the left side after the menu bar?
I can't seem to get the input inside the input group to take the full width of the form wrapper, I have tried with setting the margin-right same width as the menu-bar but that didn't work since, the input inside the input group didn't take the full width. How can I achieve the desired layout?
This is the navbar:
#media (max-width: 767px) {
.navigation-container .form-wrapper {
width: 100%;
margin-right: 32px;
}
.navigation-container .menu-button {
position: absolute;
}
.navigation-container .navbar {
height: 50px;
}
}
.navigation-container .nav-link {
padding: 0;
}
.navigation-container .navbar {
background: #fff;
flex-direction: inherit;
align-items: center;
padding: 0;
}
.navigation-container .navbar .btn {
font-size: 14px;
}
.navigation-container .navbar .right-side-bar #nav-icon1 {
width: 22px;
top: 10px;
right: 10px;
cursor: pointer;
padding: 0.85rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #008489;
border-radius: 8px;
opacity: 1;
left: 0;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span:nth-child(1) {
top: 0.3rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span:nth-child(2) {
top: 0.8rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span:nth-child(3) {
top: 1.3rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1.open span:nth-child(1) {
top: 0.8rem;
background: #008489;
}
.navigation-container .navbar .right-side-bar #nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
.navigation-container .navbar .right-side-bar #nav-icon1.open span:nth-child(3) {
top: 0.8rem;
background: #008489;
}
.navigation-container input {
border: 0;
}
.navigation-container i {
color: #008489;
font-size: 28px;
}
.navigation-container .input-group-addon {
background: #fff;
border: 0;
padding: 0;
border-radius: 0;
}
.search-button {
background: transparent;
border: 0;
}
.search-button i {
font-size: 22px;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<div class="navigation-container">
<div class="container top-menu">
<nav class="navbar navbar-light bg-faded">
<div class="hidden-md-up nav-small">
<div class="form-wrapper">
<form action="/search" method="get">
<div class="input-group">
<span class="input-group-addon">
<button type="submit" class="search-button">
<i class="ion-ios-search-strong"></i>
</button>
</span>
<input type="text" name="q" class="search-input form-control aa-input-search" placeholder="Search for players and videos ..." aria-describedby="basic-addon1">
</div>
</form>
</div>
<div class="right-side-bar">
<div id="nav-icon1" class="menu-button hidden-md-up">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="navbar-collapse collapse justify-content-between" id="navbar5">
<form action="/search" method="get" class="my-auto d-inline mx-auto col-md-8" role="search">
<div class="input-group big-screen-search-form">
<span class="input-group-addon" id="basic-addon1">
<button type="submit" class="search-button">
<i class="ion-ios-search-strong"></i>
</button>
</span>
<input type="text" id="search-input" name="q" class="search-input form-control aa-input-search" placeholder="Search for players and videos ..." aria-describedby="basic-addon1">
</div>
</form>
<ul class="navbar-nav my-auto">
<li class="nav-item dropdown">
<a class="nav-link" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ion-ios-gear-outline"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Admin dashboard</a>
<a class="dropdown-item">
Log out
</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
If you don't want to use flex, you can use a width calc and just make room for the hamburger button:
.nav-small { width: calc(100% - 40px); }
The problem is your internal .nav-small is not getting flex properties, so it isn't sizing. If I give it flex grow (1 0 0) and also make it display:flex so its internal pieces position properly, it works.
Here's a fiddle: https://jsfiddle.net/s1vz7xt3/5/ - I simply added
.nav-small {
flex: 1 0 0;
display: flex;
}
I was wondering how I can ensure that section 1 and two's background colour fills the whole of the webpage like in this example. As you can see on my site, the background colour on covers half of the webpage I want the background colour for section one and two to full the whole background of that section.
I have tried using the CSS. However, this doesn't work.
.one {
background-color:#c00;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
SITE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.one {
background-color:#c00;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.two {
background: #563D7C;
}
</style>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- 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="#bs-example-navbar-collapse-1" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="sections">
<div class="section one">
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
<script>
$(document).ready(function() {
$('#sections').fullpage();
});
</script>
</body>
</html>
It looks like you are loading jQuery twice. Once in the header (in the Bootstrap links) and once in the footer, for fullpage.js. Since you already loaded it once, you don't need it the second time.
Wrapping all your content in a .container will add a 15px left and right padding to your content, unless you don't place everything in it inside .row (which compensates), as in all the Bootstrap examples.
Make sure your markup is correct and validates. I also added a small CSS:
#sections .section {
padding-top: 10vh;
}
...to compensate for the height of the navbar.
However, please note it is not recommended to have the navbar in scalable units(vh). You should just stick to Bootstrap's defaults (50px). The problem with having a fixed navigation of 10vh is it will eat up too much real estate on mobile devices in portrait mode while not being tall enough for touch events in landscape mode. So, IMHO, you should change both the top padding of the .sections and the navbar height back to ~50px (min 42px). The important part is you should use px instead of vh for navbar height.
Here it is:
$(document).ready(function() {
$('#sections').fullpage();
});
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.one {
background-color:#c00;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.two {
background: #563D7C;
}
#sections .section {
padding-top: 10vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- 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="#bs-example-navbar-collapse-1" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="sections">
<div class="section one">
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
</div>
Additional note:
fullpage.js takes care of the fullpage thing for you. However, I happen to believe this is something CSS is capable of doing without any js, using, in principle:
.section {
min-height: 100vh;
}
...and probably flexbox to center align or distribute children nicely.
But, by using fullpage.js, you don't need to do it via CSS.
I want to create a drop down menu view based on the following HTML / CSS :
<!DOCTYPE html>
<html>
<head>
<style>
html * {
margin: 0;
padding: 0;
}
body {
color: #FFF;
}
#panel, #content {
position: absolute;
top: 0;
bottom: 0;
}
#panel {
left: 0;
width: 750px;
background: #333;
z-index: 100;
padding-top: 200px;
padding-left: 250px;
}
#content {
background: #000;
left: 250px;
right: 0px;
}
#panel > nav {
margin-bottom: 100px;
}
.Dropdown {
position: relative; /* Has to be set, can be overriden */
}
.Dropdown > ul {
position: absolute;
display: none;
list-style-type: none;
}
.Dropdown:hover > ul {
display: block;
}
.Dropdown > ul, /* On the right by default */
.Dropdown.Right > ul { /* Deploys on the right side of the label */
top: 0;
left: 100%;
}
.Dropdown.Bottom > ul { /* Deploys below the label */
top: 100%;
left: 0;
}
</style>
</head>
<body>
<div id="panel">
<nav class="Dropdown Right" style="width: 200px;"><!-- so it can appear on jsfiddle -->
<div class="Label Parent">Label</div>
<ul>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
<li>
<nav class="Dropdown Right">
<div class="Label Parent">Label</div>
<ul>
<li>
<div class="Label">Entry</div>
</li>
<li>
<nav class="Dropdown Right">
<div class="Label Parent">Label</div>
<ul>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
</ul>
</nav>
</li>
<li>
<div class="Label">Entry</div>
</li>
<li>
<div class="Label">Entry</div>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
<div id="content">
</div>
</body>
I would like a developper to be able to extend this drop down CSS to add, for example, a transition between 0 and 1 opacity.
Actually it is not possible with this code because the property display conflicts with the transition one. Adding opacity 0 on the non-hover and opacity 1 on the hover will not work because of that display property.
I've read somewhere on this web site that i could use height 0 and height auto instead of display none and display block (respectivly) but it didn't work either.
Any ideas about how to add transitions please ?
Thanks for your help !