We Keep Coding

Side navigation with top, bottom, and overflow

I'm trying to create a side navigation with a top & bottom. When the window height shrinks, I want the bottom navigation to overlap the top & the top navigation to have a scroll. I put in some CSS gradient to help indicate to the user that items are overflowed but instead I want a scrollbar. I only want the scrollbar if the content is overflowed (likely requires JS but I could be wrong).
Help appreciated
Fiddle here, HTML & CSS below.
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
background-color: #fff;
}
html,
body,
.pane-sidebar {
height: 100%;
}
.pane-sidebar {
background-color: #456081;
position: relative;
text-align: center;
width: 75px;
}
.full-height,
.k-splitter.full-height {
height: 100%;
padding: 0;
margin: 0;
}
.pane-sidebar .sidebar-menu-wrapper {
padding: 1.25rem 0;
min-height: 40rem;
overflow: auto;
}
.pane-sidebar .brand {
padding: 0;
margin: 0;
font-weight: normal;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.875rem;
color: #ffffff;
}
.pane-sidebar ul.primary {
min-height: 26.25rem;
}
.pane-sidebar ul {
list-style: none;
margin: 0;
padding: 2rem 0;
text-align: center;
}
.pane-sidebar ul li {
padding-bottom: 1.5rem;
}
.pane-sidebar ul li.secondary {
padding-bottom: 0.625rem;
}
.pane-sidebar ul li.secondary a,
.pane-sidebar ul li.secondary button {
font-size: 1.125rem;
}
.pane-sidebar ul li a {
font-size: 2rem;
color: #ffffff;
text-decoration: none;
display: block;
}
.pane-sidebar ul li.secondary a span {
font-size: 0.625rem;
}
.pane-sidebar ul li a span {
font-size: 0.75rem;
color: #ffffff;
display: block;
}
.pane-sidebar ul.secondary {
position: absolute;
bottom: 0;
left: 50%;
width: 4rem;
margin-left: -2rem;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #456081 15%, #456081 100%);
}
.pane-sidebar ul li.secondary a,
.pane-sidebar ul li.secondary button {
font-size: 1.125rem;
}
button {
background-color: transparent;
border: 0 none;
}
.pane-sidebar .show-errors {
cursor: pointer;
}
button {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
overflow: visible;
text-transform: none;
background-color: #4b708b;
color: #fff;
padding: 0.25rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<div class="pane-sidebar full-height">
<div class="sidebar-menu-wrapper">
<h1 class="brand">Brand</h1>
<ul class="primary">
<li>
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
</ul>
<ul class="secondary">
<li class="secondary">
<button class="show-errors" type="button">
<i class="far fa-bell"></i>
</span>
</button>
</li>
<li class="secondary">
<a href="#">
<i class="fas fa-box"></i>
<span>Bottom</span>
</a>
</li>
</ul>
</div>

You could use flexbox on the menu-wrapper. Then make your primary fill the extra space and show a scrollbar:
.sidebar-menu-wrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
.primary {
flex: 1;
overflow-y: auto;
}
Here is a fiddle: https://jsfiddle.net/mehg8uL2/

Change navigation position on hover

How to make this navigation effect.
Demo link: https://hookandbarrelrestaurant.com/
My code Link: https://codepen.io/Dhaval182/pen/rQPMoW

I was able to achieve this by using CSS variables, and one event listener in Javascript.
It's not super complicated, however, it did take some tinkering to get it to work correctly.
Example:
In order to detect the mouse position and make the content move like that, you need to listener for the mousemove event in Javascript. However, you can transfer that value over into CSS (sharing CSS var() statements with Javascript), and do the rest with pure CSS.
For the CSS we use the display:inline-block property along with the white-space:nowrap property to make our columns.
We set the overflow to be hidden, and make the width and height 100%
The only thing I changed with the HTML was the info element. I changed it to a div, just to make it look prettier (that was not essential and can be changed to whatever).
const navbar = document.getElementById('navbar-list');
document.addEventListener('mousemove', evt => {
let x = evt.clientX;
navbar.style.setProperty('--pos-x', (-x / 1.35));
});
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.flex-container,
.menu,
ul,
li,
a {
height: 100%;
}
.flex-container,
.menu {
width: 100%;
height: 100%;
}
.menu {
overflow: hidden;
position: relative;
}
.menu ul {
position: absolute;
/* Use calc() method to add "px" to the number transferred from Javascript */
left: calc(var(--pos-x) * 1px);
list-style: none;
margin: 0px;
padding: 0px;
white-space: nowrap;
width: 100%;
}
.menu ul>li {
padding: 0px;
margin: 0px;
margin-left: -4px;
text-align: center;
display: inline-block;
width: 25%;
}
.menu ul>li>a {
display: inline-block;
margin: 0px;
width: 100%;
text-decoration: none;
color: #000;
font-size: 18pt;
background: rgba(0, 0, 0, 0.0);
-webkit-transition: background-color 0.3s;
/* Safari */
transition: background-color 0.3s;
}
.menu ul>li>a>.info {
position: absolute;
bottom: -30px;
display: block;
width: 25%;
-webkit-transition: bottom 0.3s;
/* Safari */
transition: bottom 0.3s;
}
.menu ul>li>a:hover .info {
bottom: 20px;
}
.menu ul>li>a:hover {
background: rgba(0, 0, 0, 0.6);
color: #FFF;
}
<!-- Menu -->
<div class="menu" id="menu">
<ul class="flex-container" id="navbar-list">
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
</ul>
</div>

Dropdown Menu doesn't work inside navigation bar but works outside

I am trying to add a dropdown-menu to my navigation bar. But when i click the dropdown it doesn't show me the menu.It the menu doesn't drop down. I have looked for solutions there are other related questions. But those were code-specific problems are not relevant to my code.
If i test the dropdown code taking it outside of the navgar it works. But inside the navbar it doesn't. Can anyone please help me? If you need help regarding reading this whole or need any kind of explanation, please ask.It is i who needs help.Thanks in advance.
So here is my HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
//This is the part of dropdown//
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</nav>
And here is the CSS i am applying to it:
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
body{
background-color:#f1f1f1;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
overflow: hidden;
margin-bottom: 0;
border-radius: 0;
width: 100% ;
height: 30px;
}
.navbarw3 {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.main {
margin-top: 40px; Add a top margin to avoid content overlay
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 565px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
And here is the javascript:
<script>
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>

Based on your css classes that you used in your HTML, I assue you are using bootstrap. In that case, you really don't need to add any javascript for working with dropdown menu. make sure you linked the bootstrap css and js file in your page and then, just change the html to something like this :
<nav class="navbar justify-content-center navbar-expand-lg blackBg">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="dropdown nav-item">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#">Gallery
<span class="caret"></span>
</a>
<ul class="dropdown-menu blackBg">
<li>
Smiles
</li>
<li>
Cry's
</li>
<li>
Videos
</li>
<li>
Choreography
</li>
<li>
</li>
</ul>
</li>
</ul>
here is an example : https://jsfiddle.net/dmkh8xj1/

make dropdown menu still visible even when mouse hover is lost

I need to have main menu with dropdown menu items. So, when user hovers menu item then dropdown menu is shown. This is already done by CSS and :hover selector.
However, usually when :hover is lost (mouse is moved outside menu item element) then appropriate dropodown also disappears. But what I need - menu is still seen and disappears only on click.
One example of this effect is here: http://theemon.com/f/forever/Livepreview/agency-wedding/index.html
However I do not understand which CSS or JS creates this effect, so I cannot add snipper here (if I could, I would not ask).
In this particular example, when you hover menu item "Pages", dropdown menu appears, but it doesn't disappear when :hover is lost. It stays there. I am not able to find, what makes this effect - is it some JS or CSS?
HTML:
<ul class="navigation clearfix">
<li class="active">
HOME
</li>
<li>
pages
<ul class="drop-down">
<li>
Event
</li>
<li>
Blog
</li>
<li>
Blog-Detail
</li>
<li>
Travel-Info
</li>
<li>
404
</li>
</ul>
</li>
</ul>
Some CSS:
.clearfix {
display: block;
}
ul {
list-style-type: none;
}
ul, ol {
font-size: 100%;
line-height: 1.5;
list-style: none;
}
.navigation > li {
padding: 16px 0px 36px 26px;
float: left;
position: relative;
line-height: 1.5em;
}
.navigation > li:hover .drop-down {
top: 76px;
left: auto;
left: 16px;
right: 0;
}
.drop-down {
position: absolute;
top: 100px;
width: 160px;
z-index: 999;
left: -9999px;
opacity: 0;
transition: top .2s ease, opacity .2s ease;
}

You can add a class like .open on mouseenter to your li element which contains a dropdown.
Then do this:
var dropdown = $(".is-dropdown");
dropdown
.on("mouseenter", function() {
$(this)
.addClass("open");
})
.on("click", function() {
$(this).removeClass("open");
});
jsFiddle
CODE SNIPPET:
var dropdown = $(".is-dropdown");
dropdown
.on("mouseenter", function() {
$(this)
.addClass("open");
})
.on("click", function() {
$(this).removeClass("open");
});
.clearfix {
display: block;
}
ul {
list-style-type: none;
}
ul,
ol {
font-size: 100%;
line-height: 1.5;
list-style: none;
}
.navigation > li {
padding: 16px 0px 36px 26px;
float: left;
position: relative;
line-height: 1.5em;
}
.drop-down {
position: absolute;
top: 100px;
width: 160px;
z-index: 999;
left: -9999px;
opacity: 0;
transition: top .2s ease, opacity .2s ease;
}
.navigation > .open .drop-down {
top: 76px;
left: auto;
left: 16px;
right: 0;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation clearfix">
<li class="active">
HOME
</li>
<li class="is-dropdown">
pages
<ul class="drop-down">
<li>
Event
</li>
<li>
Blog
</li>
<li>
Blog-Detail
</li>
<li>
Travel-Info
</li>
<li>
404
</li>
</ul>
</li>
</ul>

I am sure there are other parameters to this functionality, but here is a base level solution for you.
$(document).ready(function() {
$('.drop-down').slideUp(0); //hides all your drop downs
$('.navigation li:has(> ul.drop-down)').on('mouseenter', function() {
$(this).children('ul').slideDown();
});
$('.closeEm').on('click', function(e) {
e.preventDefault(); // this stops the page jumpping on click
$('ul.drop-down').slideUp();
});
});
.clearfix {
display: block;
}
ul {
list-style-type: none;
}
ul,
ol {
font-size: 100%;
line-height: 1.5;
list-style: none;
}
.navigation > li {
padding: 16px 0px 36px 26px;
float: left;
position: relative;
line-height: 1.5em;
}
.navigation li {
background-color: #ddd;
}
.drop-down {
position: absolute;
top: 70px;
width: 160px;
z-index: 999;
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation clearfix">
<li class="active">
HOME
</li>
<li>
pages
<ul class="drop-down">
<li>
Event
</li>
<li>
Blog
</li>
<li>
Blog-Detail
</li>
<li>
Travel-Info
</li>
<li>
404
</li>
</ul>
</li>
<li>
pages
</li>
<li>
pages
</li>
<li>
pages
<li>
Close Dropdowns
</li>
</ul>

I'm not sure if i understand what you are trying to do, but i guess that this example will be what you need:
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover

Horizontal scroll in CSS when overflow-x

In a web application I have some panel. In that panel I have some labels that I'm going to retrieve by json, so I will not know the exact number. I'd like to add a horizontal scroll when these labels overflow-x in their div. I've done it using white-space: nowrap and overflow: auto, but then the labels appear shifted downwards. They are no longer aligned with the title and the icon in the panel. And I'm not able to align them.
This is the HTML code:
<nav id="menu" class="nav">
<ul>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-home"></i>
</span>
<span>Client 1</span>
<div class="commesse">
<ul>
<li>Matr 23</li>
<li>Matr 78</li>
<li>Matr 1351</li>
<li>Matr 63</li>
<li>Matr 81</li>
</ul>
</div>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-services"></i>
</span>
<span>Client 2</span>
<div class="commesse">
<ul>
<li>Matr 1235</li>
<li>Matr 61</li>
<li>Matr 72</li>
<li>Matr 42</li>
<li>Matr 771</li>
<li>Matr 671,b</li>
<li>Matr 217.a</li>
<li>Matr 2754</li>
<li>Matr 2</li>
<li>Matr 887</li>
</ul>
</div>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-portfolio"></i>
</span>
<span>Client 3</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-blog"></i>
</span>
<span>Client 4</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-team"></i>
</span>
<span>Client 5</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Client 6</span>
</a>
</li>
</ul>
</nav>
And this is the CSS concerning the mentioned html:
.nav ul {
max-width: 1240px;
margin: 0;
padding: 0;
list-style: none;
font-size: 1.5em;
font-weight: 300;
max-height: 388px;
}
.nav li {
display: block;
float: none;
width: 100%;
height: 164px;
border: 2px solid rgba(255,255,255,0.1);
margin-bottom: 30px;
overflow: auto;
}
.nav li i {
display: inline-block;
padding: 27% 28%;
border: 4px solid transparent;
border-radius: 50%;
font-size: 1.5em;
background: rgba(255,255,255,0.1);
}
.nav li span {
display: block;
text-align: left;
margin-right: 11px;
}
.nav a {
display: block;
color: rgba(249, 249, 249, .9);
text-decoration: none;
padding: 0.8em;
-webkit-transition: color .5s, background .5s, height .5s;
-moz-transition: color .5s, background .5s, height .5s;
-o-transition: color .5s, background .5s, height .5s;
-ms-transition: color .5s, background .5s, height .5s;
transition: color .5s, background .5s, height .5s;
}
.nav li span,
.nav li span.icon {
display: inline-block;
}
.nav li .icon + span {
font-size: 1.3em;
}
.icon + span {
position: relative;
top: -0.1em;
}
.icon {
padding-top: .8em;
}
.commesse, .commesse ul {
display: inline;
}
.commesse ul {
white-space: nowrap;
}
.commesse ul li {
display: inline;
}
And here is the FULL CODE: enter link description here

Just remove white-space: nowrap; from .commesse ul and give it to .nav a
Updated Plunker