We Keep Coding

My navbar toggler arrow not working properly

I made a toggler button with an arrow icon (when menu show) and bars (when menu close), I have made the code as shown below. The problems I am facing are:
1.) When I first clicked the toggler, the 3 bar icons became arrows. But, when I click the toggler button again, it doesn't return to 3 bar icons. So, the toggler is incompatible when it is opened and closed. What should be, when the menu shows, the arrow icon appears and when the menu is closed that appears is the 3 bar icon.
2.) I've coded in CSS for the transitions in arrows, but it still doesn't work.
Can anyone help me?
function toggleMenu() {
if ($(".navbar-toggler").hasClass("collapsed")) {
$(".navbar-toggler").removeClass("active");
} else {
$(".navbar-toggler").addClass("active");
}
}
$(document).ready(function(){
$('.navbar-toggler').on('click', function(){
toggleMenu();
});
});
.navbar-toggler {
height: 35px;
border:none !important;
}
.navbar-toggler:focus {
outline: none;
box-shadow: none;
}
.navbar-toggler.active .icon-bar {
border-radius: 20px;
width: 35px;
}
.navbar-toggler.active .icon-bar::before {
border-radius: 20px;
width: 15px !important;
transform: rotate(-35deg);
top: -5px !important;
transition: tranform ease-in-out;
}
.navbar-toggler.active .icon-bar::after {
border-radius: 20px;
width: 15px !important;
transform: rotate(35deg);
bottom: -5px !important;
transition: tranform ease-in-out;
}
.navbar-toggler .icon-bar {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
width: 18px;
height: 5px;
display: block;
position: relative;
}
.navbar-toggler .icon-bar::before {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
top: -12px;
}
.navbar-toggler .icon-bar::after {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
bottom: -12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

In your JQuery you are checking for the "collapsed" class which is unecessary in my eyes as you always hide or show the content when you click the toggler. So you can just switch to the toggleClass() function from Jquery. I changed your code and left a comment where i made the changes. If i understood you right this is what you want it to look like
function toggleMenu() {
// the check for the "collapsed" claass is unecessary, you can simply toggle the class
$(".navbar-toggler").toggleClass("active");
}
$(document).ready(function(){
$('.navbar-toggler').on('click', function(){
toggleMenu();
});
});
.navbar-toggler {
height: 35px;
border:none !important;
}
.navbar-toggler:focus {
outline: none;
box-shadow: none;
}
.navbar-toggler.active .icon-bar {
border-radius: 20px;
width: 35px;
}
.navbar-toggler.active .icon-bar::before {
border-radius: 20px;
width: 15px !important;
transform: rotate(-35deg);
top: -5px !important;
/*you misspelled transform and you need to add a time for the transition*/
transition: transform 1s ease-in-out;
}
.navbar-toggler.active .icon-bar::after {
border-radius: 20px;
width: 15px !important;
transform: rotate(35deg);
bottom: -5px !important;
/*you misspelled transform and you need to add a time for the transition*/
transition: transform 1s ease-in-out;
}
.navbar-toggler .icon-bar {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
width: 18px;
height: 5px;
display: block;
position: relative;
}
.navbar-toggler .icon-bar::before {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
top: -12px;
}
.navbar-toggler .icon-bar::after {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
bottom: -12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

How to style fullscreen menu under default bootstrap toggler?

I am building my first page using Bootstrap Studio and I am wondering how I could achieve a menu design like this, or similar: https://codemyui.com/fullscreen-overlay-navigation-menu/
When I click on menu toggle, it looks like this: https://imgur.com/6czS25f
My website link: https://kreatika.bss.design/
Thanks for any advice
<nav class="navbar navbar-light navbar-expand-lg sticky-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="/assets/img/Logo.png?h=9093bdbc164804385c272277c0ab9d7f"></a>
<button data-toggle="collapse" class="navbar-toggler custom-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon" style="width: 30px;height: 30px;"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link active" href="#">Úvod</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Služby</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Ukázky práce</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Náš příběh</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Akademie</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Kariéra</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Kontakt</a></li>
<li class="nav-item d-lg-flex d-xl-flex align-items-lg-center align-items-xl-center social-icons" role="presentation"><img class="social-icon-image" src="/assets/img/Facebook.png?h=261a62c570931f4fc3acbc1b33ae74d3"><img class="social-icon-image" src="/assets/img/Insta.png?h=be50f2dccc1bf2ad3d65a5104a48300d"></li>
</ul>
</div>
</div>
</nav>
[1]: https://i.stack.imgur.com/c5Dnp.jpg

https://i.imgur.com/Nunc77r.png
If its just a fixed fading menu with centered .navbar-nav, then the below answer might help. Though there are a lot of examples in your first link so hard to tell what you want exactly.
I've still not found away to disable the Bootstrap 4 navbar .collapsing toggle class. I can't find anything in the documentation to turn it off, which means you always have a height transition when opening/closing the mobile navbar.
But you can override the .collapsing class with CSS, though seems a little hacky for such a simple thing.
After a bit of fiddling I found I could override the collapsing class animation using .collapsing[style*="height"].
Bootstrap 4 natively adds the attribute style="height:...px;" to the .navbar-collapse div via javascript when the .navbar-toggler button is first clicked. But not on the second closing click.
See my codeply example link below using Bootstrap 4... (using SASS).
https://www.codeply.com/go/GXRF6aA5Du
.navbar {
.navbar-toggler {
z-index: 1000;
}
.navbar-collapse {
#include media-breakpoint-down(md) {
background: rgba(#000,.85);
opacity: 0;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
transition: opacity 0.35s ease;
display: flex;
flex-direction: column;
align-content: center;
text-align: center !important;
&.collapse {
opacity: 0;
pointer-events: none;
display: flex;
}
&.collapsing[style*="height"] {
opacity: 1;
height: 100vh !important;
}
&.collapsing {
opacity: 0;
height: 100vh;
}
&.collapse.show {
opacity: 1;
pointer-events: auto;
}
.navbar-nav {
margin-right: initial !important;
margin-top: auto;
margin-bottom: auto;
}
}
}
}
#include media-breakpoint-down(md) {
.navbar-nav {
margin-left: initial !important;
}
}
This is the CSS output below if your not using SASS.
If you drop the below CSS into the DOM on your site it looks like this...
https://i.imgur.com/Nunc77r.png
.navbar .navbar-toggler{
z-index:1000
}
#media (max-width: 991.98px){
.navbar .navbar-collapse{
background:rgba(0,0,0,0.85);
opacity:0;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
transition:opacity 0.35s ease;
display:flex;
flex-direction:column;
align-content:center;
text-align:center !important
}
.navbar .navbar-collapse.collapse{
display:flex;
opacity:0;
pointer-events:none
}
.navbar .navbar-collapse.collapsing[style*="height"]{
opacity:1;
height:100vh !important
}
.navbar .navbar-collapse.collapsing{
opacity:0;
height:100vh
}
.navbar .navbar-collapse.collapse.show{
opacity:1;
pointer-events:auto
}
.navbar .navbar-collapse .navbar-nav{
margin-right:initial !important;
margin-top:auto;
margin-bottom:auto
}
}
#media (max-width: 991.98px) {
.navbar-nav {
margin-left: initial !important;
}
}
And a stackoverflow demo too using the CSS (not the sass)...
MAIN {
padding-top: 30px;
padding-bottom: 30px;
margin-top: 56px;
height: 3000px
}
.navbar .navbar-toggler {
z-index: 1000
}
#media (max-width: 991.98px) {
.navbar .navbar-collapse {
background: rgba(0, 0, 0, 0.85);
opacity: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: opacity 0.35s ease;
display: flex;
flex-direction: column;
align-content: center;
text-align: center !important;
overflow-y: scroll;
overflow-x: hidden
}
.navbar .navbar-collapse.collapse {
display: flex;
opacity: 0;
pointer-events: none
}
.navbar .navbar-collapse.collapsing[style*="height"] {
opacity: 1;
height: 100vh !important
}
.navbar .navbar-collapse.collapsing {
opacity: 0;
height: 100vh
}
.navbar .navbar-collapse.collapse.show {
opacity: 1;
pointer-events: auto
}
.navbar .navbar-collapse .navbar-nav {
margin-right: initial !important;
margin-top: auto;
margin-bottom: auto
}
}
#media (max-width: 991.98px) {
.navbar-nav {
margin-left: initial !important;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<a class="btn btn-lg btn-primary" href="/docs/4.2/components/navbar/" role="button">View navbar docs »</a>
</div>
</main>

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/

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

Hidden sidebar that shows up on hover

I'm trying to create a sidebar that is hidden by default but that shows up on hover. The closest example I can think of is this one: http://www.sidlee.com/. When you're on any of the pages beyond the home page, the sidebar only shows numbers. Once you move your mouse over this area, the sidebar expands to show the text. I'm guessing there's a way to do this with JavaScript but I'm no expert so I though somebody here could help me out.

That's just a simple example but hopefully it will put you on the right track :)
CSS:
#nav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;}
#nav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;}
#nav a span{margin:0 10px 0 0;}
#nav a{color:#fff;font-size:14px;text-decoration:none;}
jQuery:
$(function(){
$('#nav').hover(function(){
$(this).animate({width:'200px'},500);
},function(){
$(this).animate({width:'35px'},500);
}).trigger('mouseleave');
});
HTML:
<div id="nav">
<ul>
<li><span>01</span> HomePage</li>
<li><span>02</span> SubPage 1</li>
<li><span>03</span> SubPage 2</li>
<li><span>04</span> SubPage 3</li>
<li><span>05</span> SubPage 4</li>
</ul>
</div>
If you want to show only numbers at start (without the closing animation onload) change the #nav{width:35px;} and remove the .trigger('mouseleave')
Cheers
G.

Found a way how to actually do this without javascript or jQuery. This answer could be very efficient for those who are working on Uni/College assignments, and cannot use third party libraries such as JQuery.
Obviously having said that, using JQuery will give the same outcome in less code.
Here you go:
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
width: 250px;
overflow: visible;
}
.main-menu {
background: #fbfbfb;
border-right: 1px solid #e5e5e5;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
left: 0;
width: 60px;
overflow: hidden;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
z-index: 1000;
}
.main-menu>ul {
margin: 7px 0;
}
.main-menu li {
position: relative;
display: block;
width: 250px;
}
.main-menu li>a {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
color: #999;
font-family: arial;
font-size: 14px;
text-decoration: none;
-webkit-transform: translateZ(0) scale(1, 1);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.main-menu .nav-icon {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 18px;
}
.main-menu .nav-text {
position: relative;
display: table-cell;
vertical-align: middle;
width: 190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position: absolute;
left: 0;
bottom: 0;
}
.no-touch .scrollable.hover {
overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y: auto;
overflow: visible;
}
a:hover,
a:focus {
text-decoration: none;
}
nav {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav ul,
nav li {
outline: 0;
margin: 0;
padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
color: #fff;
background-color: #5fa2db;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
<html>
<head>
</head>
<body>
<div class="area"></div>
<nav class="main-menu">
<ul>
<li>
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
UI Components
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
Forms
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-folder-open fa-2x"></i>
<span class="nav-text">
Pages
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bar-chart-o fa-2x"></i>
<span class="nav-text">
Graphs and Statistics
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-font fa-2x"></i>
<span class="nav-text">
Typography and Icons
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-table fa-2x"></i>
<span class="nav-text">
Tables
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-map-marker fa-2x"></i>
<span class="nav-text">
Maps
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-info fa-2x"></i>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
<ul class="logout">
<li>
<a href="#">
<i class="fa fa-power-off fa-2x"></i>
<span class="nav-text">
Logout
</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
Hope this helps :)

Just start plugging away at the jQuery API. This is how you would begin the structure of it. Using .animate() will give you the ability to adjust your menu css properties how you see fit.
$("#yourmenu").hover( function() {
$(this).stop(true,true);
$(this).show();
}, function () {
$(this).hide();
});

Edvard,
I'd suggest doing this the following way. Hopefully with some ideas and some links to the right jQuery elements you should be able to get this done.
First step would be to have a div that is 100% transparent and a div inside that which contains the menu. Then from the menu div I would hide that element, then when you mouse over the container dive you could use a .hover() method to animate the slide out of the inner div.
Here is some basic code which should get you started.
<div id="menuContainer">
<div id="menu">
<ul>
<li>This</li>
<li>Is</li>
<li>A</li>
<li>Menu</li>
</ul>
</div>
</div>
Then some CSS:
/* Set the container to be fixed to the top of the screen and set it's height
This is important so we know where the mouse can hover */
div#menuContainer {
background: transparent;
position: fixed;
top: 0;
left: 0;
height: 50px;
}
/* Set the menu as hidden */
div#menu {
background: red;
width: 900px;
height:
margin: 0 auto;
display: none;
}
/* Fiddle with the menu items */
div#menu ul { list-style-type: none; }
div#menu ul li { display: inline; }
Then some jQuery:
$('#menuContainer').mouseenter(function(){
$('#menu').slideToggle();
}).mouseleave(function() {
$('#menu').slideToggle();
});
This is obviously untested code, but it should give you a great headstart! :-)

You can use JQuery's .hover() method in conjunction with .animate() to have a div slide out when a .mouseenter() event occurs.
JQuery API for Hover