I'm using bootstrap 3.3.7
I have created dropdown menus and sub-menus down to 4 levels and so far it is working as expected using a combination of li and ul elements. The trouble is that some of the menu dropdowns are quite large, so I want to force scrollbars and height to contain the size of the dropdowns on screen.
On my top level dropdown I've added the following style to the css:
height:300px; overflow-y:scroll; overflow:hidden;
this has given me the desired effect on the first and second level dropdown (both have scroll bars and sit side by side) on the next level it displays inside the second level's container. when this should also be outside. (my code below doesn't show correctly using the code snippet tool for some reason, but if you place the code locally it shows correctly as far as it goes).
Basically if you take the default way that bootstrap creates menu's and submenus where each submenu appears to the right of the parent and slightly down. My goal is to set the top of each level to the top of the first level menu keeping the height of each level the same with scrollbars when necessary.
body {
font-family: EvaluateFont, Arial, sans-serif;
font-weight: bold;
font-size: 9pt;
padding-top: 70px;
}
.navbar {
height: 70px;
}
.navbar-toggle {
top: -8px;
left: 0px;
width: 64px;
height: 69px !important;
border-style: none;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 20px !important;
padding-right: 20px !important;
background-color: lightblue;
border-radius: 0 0 0 0;
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0;
float: left !important;
}
.scrollable-menu {
height: 75px;
overflow-x: hidden;
overflow-y: auto;
}
.dropdown-menu { /* This is valid in the browser.*/
width: max-content;
border-bottom:none;
}
.dropdown-menu.main {
top: 161px !important;
height: 75px;
border: 0;
outline: none;
}
.wrapper {
position: relative;
cursor:auto;
}
li {
position: static;
list-style: none;
color: #333;
font-weight: 400;
white-space: nowrap;
// submenu
ul.wrapper {
// position on top of the menu item
position: absolute;
// top matches top
//top: 0;
// left matches 75% of menu item width
// left: 75%;
// show on top of the menu item
z-index: 10; /*put this to -1 once click state has been implemented (will put it below the scrollbar)*/
// do not show the submenu by default
display: none;
}
// display the submenu when we hover on the menu item
&:hover > .wrapper {
display: block;
top: 85px !important;
border: 0;
outline: none;
left: 235px;
width: auto;
}
}
li.level-1, li.level-2, ul.level-3 {
margin-left: -30px;
a {
display: block;
padding: 5px;
white-space: nowrap;
clear: both;
}
}
ul.level-2 > li {
margin-left: -25px;
}
ul.menu-list {
background-color:#b200ff;
}
ul.wrapper.level-2 {
background-color: #ff6a00;
width: 100%;
}
ul.wrapper.level-3 {
background-color: #451968;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-collapse collapse">
<ul class='nav navbar-nav'>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-pencil"></span> CREATE REPORT
<span class="caret"></span>
</a>
<div class="dropdown-menu">
<ul>
<li class="dropdown-submenu not-visible"><span class="text">Choose a type of report.</span><i class="fa fa-close pull-right icon-dropdown"></i></li>
</ul>
<ul class="scrollable-menu menu-list">
<li class="parent level-1" >
report set 1
<ul class="wrapper level-2" role="menu" aria-labelledby="comenu">
<li>rep 1</li>
<li>rep 2</li>
<li>rep 3</li>
</ul>
</li>
<li class="parent level-1">
rep set 2
<ul class="wrapper scrollable-menu menu-list level-2">
<li>rep 1</li>
<li>rep 2</li>
<li>rep 3</li>
<li>rep 4</li>
<li>rep 5</li>
<li>rep 6</li>
<li>rep 7</li>
<li class="parent level-2">
rep 7 sub
<ul class="wrapper menu-list level-3">
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Related
I'm trying to make it so when you hover over one of the categories in the header nav "CALLS | CHATS | MORE" the subnav below shows and the ul that is associated with the header nav changes its background color i know i can just add a class using jQuery but could i not do this with a sibling selector or something? i just think my HTML is layed out incorrectly at the moment for it to work TIA. this is what i currently have.
<header class="header">
<ul class="header__nav">
<li class="header__navItem header__navItem--calls">Calls</li>
<li class="header__navItem header__navItem--chats">Chats</li>
<li class="header__navItem header__navItem--more">More</li>
</ul>
<nav class="navigation">
<div class="navigation__wrapper cf">
<ul class="navItems navItems--calls">
<li class="navItems__item"></li>
<li class="navItems__item"></li>
<li class="navItems__item"></li>
<li class="navItems__item"></li>
<div class="bgHover"></div>
</ul>
</div>
</nav>
</header>
.header {
height: 5.8rem;
background: rgba(25, 25, 25, 0.9);
position: absolute;
width: 100%;
z-index: 999;
&__nav {
display: inline-block;
text-align: center;
font-size: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
padding: 0;
margin: 0;
}
&__navItem {
color: $white;
display: inline-block;
#include font-size(18);
padding: 0 4rem;
line-height: 5.8rem;
letter-spacing: 0.1rem;
position: relative;
cursor: default;
font-weight: 400;
text-transform: uppercase;
font-family: $lato;
&--calls {
&:hover ~ .navigation__wrapper .navItems .bgHover {
max-height: 35rem;
}
&:hover {
color: red;
}
}
}
I'm presuming you want the submenu to appear below the header nav. If so, then move your sub nav into the li tag for the corresponding header item, like so:
<li class="header__navItem header__navItem--calls">Calls
<ul class="navItems navItems--calls">
<li class="navItems__item">First</li>
<li class="navItems__item">Second</li>
<li class="navItems__item">Third</li>
<li class="navItems__item">Fourth</li>
</ul>
</li>
I am creating a menu using an unordered list that mixes list items of different sizes, some are half the height and width of others. They all float left. What I'm getting is this:
If I add clear:left to the third small item I get this:
What I want is for the second and fourth (or third and forth) small items to float below the other two, like this:
Is there a way to do this with css? The menu is created dynamically so forcing a particular position won't work, it needs to be able to flow into the proper position.
Would having multiple <ul/> work for you ? If so, the following Codepen would work : https://codepen.io/anon/pen/qPaVar
Same code as an embedded code snippet :
ul {
list-style : none;
padding: 0;
margin: 0;
text-align: center
}
li {
margin: 0
}
li.left {
float: left
}
div.small {
background-color: blue;
width: 20px;
height: 20px
}
div.large {
background-color: yellow;
width: 40px;
height: 40px;
}
<ul>
<li class="left">
<div class="large">A</div>
</li>
<li class="left">
<ul>
<li class="left">
<div class="small">1</div>
</li>
<li class="left">
<div class="small">2</div>
</li>
</ul>
<ul>
<li class="left">
<div class="small">3</div>
</li>
<li class="left">
<div class="small">4</div>
</li>
</ul>
</li>
<li class="left">
<div class="large">B</div>
</li>
</ul>
Hope this helps!
Try the grid-auto-flow: dense
https://developer.mozilla.org/ru/docs/Web/CSS/grid-auto-flow
try this
.main li {
display: inline-block;
vertical-align: middle !important;
width: 200px;
height: 200px;
border: 1px solid;
}
.inner-div li {
width: 99px;
height: 89px;
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
float: left;
text-align: center;
}
ul.inner-div {
list-style: none;
padding: 0;
}
<div class="container">
<ul class="main">
<li>div 1</li>
<li>div 2
<ul class="inner-div">
<li>div 21</li>
<li>div 21</li>
<li>div 21</li>
<li>div 21</li>
</ul>
</li>
<li>div 3</li>
</ul>
</div>
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 created a menu and a submenu that should appear after I hover over the list elements of the main menu. The problem is that the widths of the main menu's list elements changes while hovering, and it looks puzzling. I tried it with a fixed width, but the space between the menu items is too big then.
I also tried to set the submenu to position absolute, but the problem was that the submenu was always located at the same position and not beneath the main menu's item which was active.
I created a codepen for this issue.
HTML:
<ul class="menubar">
<li class="menubar-li">Unternehmen
<ul class="menubar-sub">
<li class="menubar-sub-li">Profil
<li class="menubar-sub-li">Meilensteine
<li class="menubar-sub-li">Team
<li class="menubar-sub-li">News
<li class="menubar-sub-li">Jobs</li>
</ul>
</li>
<li class="menubar-li">Kompetenzen
<ul class="menubar-sub">
<li class="menubar-sub-li">Kreation
<ul class="menubar-subsub">
<li>Strategie
<li>Design
<li>Online
<li>Reinzeichnung</li>
</ul>
</li>
<li class="menubar-sub-li"> Prepress
<ul class="menubar-subsub">
<li>Seitenproduktion</li>
<li>Kreativretusche
<li>Colormanagement
<li>Proofen</li>
</ul>
</li>
<li class="menubar-sub-li">Druck
<ul class="menubar-subsub">
<li>Personalisiert</li>
<li>Web 2 Print</li>
</ul>
</li>
<li class="menubar-sub-li">Katalogmanagement</ul>
</li>
<li class="menubar-li">Portfolio</li>
<li class="menubar-li">Service
<ul class="menubar-sub">
<li class="menubar-sub-li">Mediapool</li>
<li class="menubar-sub-li">DUON</li>
<li class="menubar-sub-li">Datenupload</li>
<li class="menubar-sub-li">Downloads
</ul>
</li>
<li class="menubar-li">Kontakt
<ul class="menubar-sub">
<li class="menubar-sub-li">Ansprechpartner</li>
<li class="menubar-sub-li">Anfahrt</li>
<li class="menubar-sub-li">Impressum</li>
</ul>
</li>
</ul>
CSS:
.menubar {
list-style: none;
position: relative;
bottom: 16px;
}
.menubar a {
color: black;
text-decoration:none;
font-size: 13px;
position: relative;
}
.menubar-li {
float: left;
height:29px;
line-height:29px;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
margin-right: 10px;
}
.menubar-li:hover {
background-color: #94ba1d;
cursor: pointer;
}
.menubar-li:hover .menubar-sub {
display: block;
}
.menubar-sub {
display: none;
list-style: none;
margin-top: 1px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 0px;
background-color: #94ba1d;
position: relative;
left: -10px;
}
.menubar-sub-li {
line-height: 14px;
padding-top: 5px;
padding-left: 10px;
}
.menubar-subsub {
display: none;
}
You can position the submenu below the main menu button by setting the main menu button to position: relative and placing the (absolute) submenu inside it. You then show/hide the submenu by toggling overflow: hidden and visible.
Here is a demo: http://codepen.io/seraphzz/pen/osGnh
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 !