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
Related
I want the links to spread out along my navbar with bootstrap. I tried using flex utilities on the navbar and I also attempted to apply the nav class to make the navbar flex-enabled and then use the .justified-content-around bootstrap class, but for some reason that I cannot see it is not wanting to work! It appears as if there are margins or padding pushing the links together on the navbar but when inspecting it with developer tools I don't see anything of the sort.
Here is my codepen to examine: https://codepen.io/Spector1/pen/WNGxzpz
Otherwise here is my html and css below.
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="/">
<i class="fas fa-mobile-alt"></i>
<span>Q⋅C⋅R</span>
</a>
<button class="navbar-toggler" type="button" data-trigger="#MainNav" aria-controls="MainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-around" id="MainNav">
<div class="offcanvas-header mt-3">
<a class="navbar-brand" href="/">
<i class="fas fa-mobile-alt"></i>
<span>Q⋅C⋅R</span>
</a>
<button class="btn btn-dark btn-close float-right" aria-label="Close navigation">
<span>× Close</span>
</button>
</div>
<ul class="nav navbar-nav">
<li class="nav-item mx-auto">
<a class="nav-link focus" href="/home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item mx-auto">
<a class="nav-link focus" href="/about">About Us</a>
</li>
<li class="nav-item mx-auto dropdown">
<a class="nav-link focus shadow-none dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Repair Pricing
</a>
<div class="dropdown-menu fade-down" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Smartphones</a>
<a class="dropdown-item" href="#">Smart Watches</a>
<a class="dropdown-item" href="#">Tablets & iPads</a>
<a class="dropdown-item" href="#">Drones</a>
<a class="dropdown-item" href="#">Laptops</a>
<a class="dropdown-item" href="#">Desktops</a>
<a class="dropdown-item" href="#">Other/Custom Quote</a>
</div>
</li>
<li class="nav-item mx-auto dropdown">
<a class="nav-link focus shadow-none dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Warranties & Policies
</a>
<div class="dropdown-menu fade-down" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Our Repair Warranties</a>
<a class="dropdown-item" href="#">Rewards Program</a>
<a class="dropdown-item" href="#">Our Repair Policies</a>
</div>
</li>
<li class="nav-item mx-auto">
<a class="nav-link focus" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<main>
<div>
<h1>Home/Index Page</h1>
</div>
</main>
<footer>Quality Cell Repair © 2020</footer>
</body>
/* Mobile Nav Overlay/OffCanvas Menu Styles */
body.offcanvas-active {
overflow: hidden;
}
.offcanvas-header {
display: none;
}
nav #MainNav button.btn-dark {
background-color: #1d1d2c;
border: none;
}
/* Nav Hamburger Menu Icon (create lines) */
.navbar-toggler {
margin: 1em;
width: 65px;
border: 2px solid #f7f4e9;
transition: border 0.2s ease-in-out;
}
.navbar-toggler:hover,
.navbar-toggler:focus {
border: none;
/* Remove kyboard navigation outline when focused */
outline: none;
}
.navbar-toggler:after,
.navbar-toggler:before,
.navbar-toggler span.icon-bar {
background-color: #f7f4e9;
border-radius: 2px;
content: "";
display: block;
height: 4px;
margin: 5px 0;
transition: all 0.2s ease-in-out;
}
/* Create Hover Animation Effect for Mobile Nav Icon */
.navbar-toggler:hover:before,
.navbar-toggler:focus:before {
transform: scale(1.2) translateY(-7px);
height: 5px;
}
.navbar-toggler:hover span.icon-bar,
.navbar-toggler:focus span.icon-bar {
transform: scale(1.2);
height: 5px;
}
.navbar-toggler:hover:after,
.navbar-toggler:focus:after {
transform: scale(1.2) translateY(7px);
height: 5px;
}
/* Customize navbar theme */
.navbar {
background-color: #e83953;
}
/* change the Brand Icon and Icon text weight */
.navbar .navbar-brand {
font-weight: 500;
color: #1d1d2c;
font-size: 45px;
}
/* Change main nav link colors */
.navbar .navbar-nav .nav-link {
color: #1d1d2c;
transition: 650ms;
}
.navbar .navbar-nav .dropdown-toggle {
color: #1d1d2c;
transition: 650ms;
}
/* Change main nav links color when hovering */
.navbar .navbar-nav .dropdown-toggle:hover {
color: #f7f4e9;
}
.navbar .nav-item:hover .nav-link {
color: #f7f4e9;
}
/* Show link selection for keyboard navigation */
.navbar ul a.focus:focus {
outline: none;
color: #f7f4e9;
}
/* for dropdown only - change the color of dropdown */
.navbar .dropdown-menu {
background-color: #f7f4e9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.navbar .dropdown-item {
color: #e83953;
transition: 650ms;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
background-color: #e83953;
color: #f7f4e9;
font-weight: 700;
}
/* ============= DESKTOP VIEW ============= */
/* Navbar Dropdown animation */
#media all and (min-width: 768px) {
.navbar .nav-item .dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
transition: 350ms;
margin-top: 0;
}
.navbar .dropdown-menu.fade-down {
top: 80%;
transform: rotateX(-75deg);
transform-origin: 0% 0%;
}
.navbar .dropdown-menu.fade-up {
top: 180%;
}
.navbar .nav-item:hover .dropdown-menu,
.navbar .nav-item:focus .dropdown-menu {
transition: 300ms;
opacity: 1;
visibility: visible;
top: 100%;
transform: rotateX(0deg);
}
}
/* ============ desktop view .end// ============ */
/* ========== Mobile view ========== */
#media (max-width: 768px) {
.offcanvas-header {
display: block;
}
.navbar-collapse {
position: fixed;
top: 0;
bottom: 0;
left: 100%;
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
visibility: hidden;
background-color: #e83953;
transition: visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.navbar-collapse.show {
visibility: visible;
transform: translateX(-100%);
}
/* Shorten link widths, except dropdowns */
.navbar ul li > a {
width: 15%;
}
}
/* ========== Mobile view ./end ========== */
/* ======================================================================================================== */
The problem
Hello!
I have a problem with my hoverable dropdown menu. It always stays under the first navigation item even though it's not triggered, but it should be under the triggered navigation item (the navigation item on which the mouse pointer is located). How can i how can I fix that?
Thanks in advance!
#nav-list {
padding: 0;
margin: 0;
list-style-type: none;
}
.nav-item {
display: inline;
padding: 0;
}
.nav-item-text {
padding: 16px;
margin: 0;
font-size: 14px;
font-family: var(--primary-font-stack);
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: context-menu;
display: inline;
color: var(--on-background);
opacity: var(--high-emphasis);
}
.nav-item-link {
padding: 20px;
margin: 0;
font-size: 14px;
font-family: var(--primary-font-stack);
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: pointer;
display: inline;
color: var(--on-background);
opacity: var(--high-emphasis);
}
.nav-item-link:hover {
opacity: 100%;
cursor: pointer;
transition: .2s ease all;
color: var(--primary);
}
.nav-dropdown {
display: none;
opacity: 0;
position: absolute;
z-index: 99;
margin: 3px 0 0 0;
padding: 15px;
height: auto;
min-width: 280px;
background: var(--background);
border-radius: 4px;
border: 2px solid var(--elevation-16dp);
}
.nav-item:hover .nav-dropdown {
display: block;
transition: .2s ease all;
opacity: 100%;
}
<ul id="nav-list">
<li class="nav-item">
<p class="nav-item-text">Dropdown Trigger</p>
<ul class="nav-dropdown">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title A 1</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<hr class="nav-drpdwn-hl">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
</ul>
</li>
<li class="nav-item">
<p class="nav-item-text">Dropdown Trigger</p>
<ul class="nav-dropdown">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title B 2</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<hr class="nav-drpdwn-hl">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
</ul>
</li>
</ul>
You have to add this css to your code:
<style>
#nav-list > li {
position:relative;
}
#nav-list .nav-dropdown {
left: 0;
}
</style>
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>
I want the side bar menu using bootstrap.
I want to hide the menu even in the large screen by clicking the button.
When collpasing to the left side menu icons should display on the left side.
Inside the menu item by clicking it dropdown to the side.
Please tell me the solution.
I tried using the css and bootstrap and jquery. It is not working.
#wrapper {
padding-left: 250px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -250px;
top: 51px;
left: 250px;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#wrapper.active {
padding-left: 0;
}
#wrapper.active #sidebar-wrapper {
left: 0;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
padding-left: 60px;
}
.sidebar-nav li a span:before {
position: absolute;
left: 0;
color: #41484c;
text-align: center;
width: 20px;
line-height: 18px;
}
.sidebar-nav li a:hover,
.sidebar-nav li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
text-decoration: none;
float: left;
color: #fff;
padding-right: 15px;
}
#media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
#menu-toggle {
display: inline-block;
}
}
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
Project name
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<nav id="spy">
<ul class="sidebar-nav nav">
<li class="sidebar-brand">
<span class="fa fa-home solo">Home</span>
</li>
<li>
<a href="#anch1">
<span class="fa fa-anchor solo">Anchor 1</span>
</a>
</li>
<li>
<a href="#anch2">
<span class="fa fa-anchor solo">Anchor 2</span>
</a>
</li>
<li>
<a href="#anch3">
<span class="fa fa-anchor solo">Anchor 3</span>
</a>
</li>
<li>
<a href="#anch4">
<span class="fa fa-anchor solo">Anchor 4</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I added some jquery code and chaged this block of your code. rest of the code is same.
Also don't forget to add jquery, font-awesome, and bootstrap cdn in your code. (as included in the snippet below)
<div class="navbar-brand">
<a id="menu-toggle" href="#" class=" btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
Project name
</div>
$(document).ready(function () {
$("a#menu-toggle").click(function (){
$("#wrapper").toggleClass("active");
});
});
#wrapper {
padding-left: 250px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -250px;
top: 51px;
left: 250px;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#wrapper.active {
padding-left: 0;
}
#wrapper.active #sidebar-wrapper {
left: 0;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
padding-left: 60px;
}
.sidebar-nav li a span:before {
position: absolute;
left: 0;
color: #41484c;
text-align: center;
width: 20px;
line-height: 18px;
}
.sidebar-nav li a:hover,
.sidebar-nav li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
text-decoration: none;
float: left;
color: #fff;
padding-right: 15px;
}
#media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
#menu-toggle {
display: inline-block;
}
}
.dropdown,.sidebar-nav,#id,#sidebar-wrapper{
overflow:visible;
}
.dropdown>.dropdown-menu{
position:absolute;
top:0;
left:100%;
z-index:100;
background-color:black;
margin:0;
padding:0;
border:none;
border-radius:0;
}
.dropdown>.dropdown-menu>li>a{
line-height:45px;
color:white;
background-color:black;
}
.dropdown>.dropdown-menu>li>a:hover{
background: rgba(255,255,255,0.2);
color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">
<a id="menu-toggle" href="#" class=" btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
Project name
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<nav id="spy">
<ul class="sidebar-nav nav">
<li class="sidebar-brand">
<span class="fa fa-home solo">Home</span>
</li>
<li>
<a href="#anch1">
<span class="fa fa-anchor solo">Anchor 1</span>
</a>
</li>
<li class="dropdown">
<span class="fa fa-anchor solo">Anchor 2</span><span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li>
<a href="#anch3">
<span class="fa fa-anchor solo">Anchor 3</span>
</a>
</li>
<li>
<a href="#anch4">
<span class="fa fa-anchor solo">Anchor 4</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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