Im new to programming, so pardon me if the questions is a bit basic.
Im making a web application. And I browse codepen for a menu bar that satisfy my need. And come up with a nice one : https://codepen.io/vichid/pen/cHnmK
The problem is, the sub menu is expand while on hover.
While what I want is, the sub menu expand only when I click the link menu.
here is the html code :
<ul class="menu">
<li>
Beranda
</li>
<li>
Tabel
<ul class="sub-menu">
<li>Departemen</li>
<li>Cabang</li>
</ul>
</li>
<li>
Pegawai
<ul class="sub-menu">
<li>Data Induk Pegawai</li>
<li>Laporan Pegawai</li>
<li>Slip Gaji</li>
</ul>
</li>
<li>
Pajak
<ul class="sub-menu">
<li>Parameter Pajak</li>
<li>Kalkulator Pajak</li>
<li>Perhitungan Manual</li>
</ul>
</li>
<li>
Sistem
<ul class="sub-menu">
<li>Pengguna</li>
<li>Perusahaan</li>
</ul>
</li>
<li>
Logout
</li>
</ul>
and here is the CSS :
<style class="cp-pen-styles">
nav {
/*
position: absolute;
top: 50%;
left: 0;
bottom: 50%;
right: 0;
*/
}
ul.menu {
width: 100%;
height: 40px;
line-height: 40px;
position: relative;
text-align: center;
margin: auto;
padding: auto;
background-color: #DCE6F2;
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
}
ul.menu li {
float: left;
width: auto;
}
ul.menu li a {
display: block;
width: auto;
text-decoration: none;
}
ul.menu li:hover {
background-color: #95B3D7;
-moz-transition-property: background-color;
-o-transition-property: background-color;
-webkit-transition-property: background-color;
transition-property: background-color;
-moz-transition-duration: 0.33s;
-o-transition-duration: 0.33s;
-webkit-transition-duration: 0.33s;
transition-duration: 0.33s;
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
}
ul.menu li:hover ul {
width: 100%;
background: #95B3D7;
visibility: visible;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-property: opacity;
-moz-transition-duration: 0.33s;
-o-transition-duration: 0.33s;
-webkit-transition-duration: 0.33s;
transition-duration: 0.33s;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
ul.sub-menu {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
visibility: hidden;
display: block;
position: absolute;
left: 0;
height: 40px;
line-height: 40px;
background-color: #95B3D7;
}
ul.sub-menu li:hover {
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
ul.menu a,
ul.sub-menu a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #0E0500;
padding: 0 10px;
}
</style>
The above code make menu bar that expand its submenu while on hover, while I want is onclick (just onclick, not onhover and onclick guys...)
Any idea ?
Any help would be appreciated..... thank you.....
By leveraging the :focus property on the a sibling of the sub-menu we can use that instead of the parent li:hover to show/hide the sub-menu.
Natively, a tags with a defined href attribute can be focused (if you werent using an a you could add tabindex="-1" to an element to make it focusable). If you would like to know more about focus and tabindex have a look at this answer.
As this is a direct sibling of the ul.sub-menu, we can "select" it using the + sibling selector like so: a:focus + ul.sub-menu, and apply the appropriate styling to display the submenu.
SCSS
ul.menu{
width: $menuWidth;
height: 40px;
line-height: 40px;
position: relative;
text-align: center;
margin: auto;
padding: auto;
background-color:$menuColor;
#include border-top-radius($borderRadius);
li{
float: left;
width: auto;
a{
display: block;
width: auto;
text-decoration: none;
}
a:hover,
a:focus
{
background-color:$subMenuColor;
#include transition-property(background-color);
#include transition-duration($duration);
#include border-top-radius($borderRadius);
}
a:focus + ul,
a + ul:hover{
width: $menuWidth;
background: $subMenuColor;
visibility: visible;
#include opacity(1);
#include transition-property(opacity);
#include transition-duration($duration);
#include border-bottom-radius($borderRadius);
}
}
}
CODEPEN
You can do it simply with jQuery, HTML, and CSS.
<!DOCTYP html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function() {
$(".list-p").click(function() {
var data = $(this).attr("data");
$(".list-s").hide();
$(".list-s-"+data+"").toggle();
});
});
</script>
</head>
<body>
<style>
body,html {margin:0;}
.menu {background:#555; height:40px;}
.menu ul,ol,dl {list-style:none; margin:0; padding:0;}
.menu li {float:left; margin:0 20px 0 0; padding:10px; border-right:1px #000 solid; position:relative;}
.menu li:last-child {margin-right:0; border-right:0;}
.menu span {color:#fff; text-decoration:none;}
.list-s {position:absolute; background:#555; left:0; width:150px; top:42px; display:none;}
.list-s ol{padding:10px; border-bottom:1px #000 solid;}
a {color:#fff;}
</style>
<div id="menu">
<div class="menu">
<ul>
<li><span class="list-p" data="1">list-p-1</span>
<dl class="list-s-1 list-s">
<ol>list-s-1</ol>
<ol>list-s-2</ol>
<ol>list-s-3</ol>
</dl>
</li>
<li><span class="list-p" data="2">list-p-2</span>
<dl class="list-s-2 list-s">
<ol>list-s-1</ol>
<ol>list-s-2</ol>
<ol>list-s-3</ol>
</dl>
</li>
<li><span class="list-p" data="3">list-p-3</span>
<dl class="list-s-3 list-s">
<ol>list-s-1</ol>
<ol>list-s-2</ol>
<ol>list-s-3</ol>
</dl>
</li>
<li><span class="list-p" data="4">list-p-4</span>
<dl class="list-s-4 list-s">
<ol>list-s-1</ol>
<ol>list-s-2</ol>
<ol>list-s-3</ol>
</dl>
</li>
</ul>
</div>
</div>
</body>
</html>
Related
I am attempting to use a bootstrap sidebar which on smaller screens becomes horizontal navigation. Everything is working fine except for Page content (which has to be on right side of sidebar) appears on top of sidebar.
JS Fiddle
My code:
.nav-side-menu {
overflow: auto;
font-family:'Montserrat', sans-serif;
font-size: 12px;
font-weight: 200;
background-color: #FFF;
position: fixed;
top: 0px;
width: 250px;
height: 100%;
color: #000;
border-right:solid 1px black;
}
.nav-side-menu .brand {
background-color: #FFF;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.logoimg {
width: 70%;
margin-top: 20px;
background: url('logomedium.png');
background-size: 200px 133px;
height: 133px;
width: 200px;
/* margin-left:auto;
margin-right:auto; */
margin-left:20px;
background-position: center;
margin-bottom: 80px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #eeeeee;
background-color: #eeeeee;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #eeeeee;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
text-align: center;
/*border-left: 3px solid #2e353d; */
padding-bottom: 15px;
padding-top: 15px;
/*border-bottom: 1px solid #23282e;*/
}
.nav-side-menu li a {
text-decoration: none;
font-size:12pt;
color: #000000;
text-transform: uppercase;
vertical-align: middle;
}
.nav-side-menu li a {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li a:focus {
outline: 0;
}
.nav-side-hr {
width: 75%;
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #333; /* Modern Browsers */
}
.nav-side-menu li:hover {
/*border-left: 3px solid##eeeeee;*/
background-color: #eeeeee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.logoimg {
margin-top: 10px;
background: url('logohorizontal.png');
background-size: 200px 48px;
height: 48px;
margin-bottom: 10px;
width: 200px;
/* margin-left:auto;
margin-right:auto; */
margin-left: 5px;
background-position: center;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #AF2024;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
border-bottom: 1px solid black;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
<div id="wrapper">
<!-- Sidebar -->
<div class="nav-side-menu">
<div class="brand"><div class="logoimg" />LOGO PLACEHOLDER</div></div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class=""></i> About Us
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed">
<i class=""></i> Services
</li>
<li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
</li>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class=""></i> Contact us
</li>
<li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
</li>
<hr class="nav-side-hr" />
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class=""></i> RATES
</li>
<li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
</li>
<li>
<a href="#">
<i class=""></i> TRACKING SYSTEM
</a>
</li>
<li>
<a href="#">
<i class=""></i> QUOTE ME
</a>
</li>
<hr class="nav-side-hr" />
<li>
<a href="#">
<i class=""></i> FIND US
</a>
</ul>
</div>
</div>
<!-- End Sidebar -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
</div>
</div>
</div>
</div>
</div>
UPDATE: As suggested added padding to page-wrapper, but when I add text to page content, sidenav links stop working/hovering.
JS FIDDLE https://jsfiddle.net/y3eL6m8v/4/
In the media query you should add a padding-left with the value of the width from the sidenav to the page-content-wrapper class.
#media(min-width:768px) {
#page-content-wrapper {
padding-left: 250px;
position: relative;
}
}
Click here for a jsfiddle
Please add this in your css:
#media (min-width: 768px)
{
#page-content-wrapper
{
padding: 20px 20px 20px 250px;
position: relative;
}
}
Check this fiddle https://jsfiddle.net/y3eL6m8v/2/
I am very new to css trying to learn new language, I have a dropdowm which i had done using css and html now how to create a submenu into it on hover over one link
Check my code till now what i did :
.nav-collapse .nav li a {
font-size: 13px;
color: #7281a1;
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
text-shadow: none;
padding: 25px 15px 26px 30px;
}
.nav-collapse .nav>li {
margin-left: 3px;
position: relative;
}
.nav-collapse .nav li a#home-nav {
background: url('../images/home.png') 3px center no-repeat;
}
.nav-collapse .nav li a:hover {
text-decoration: underline;
color: #7281a1;
}
ul.dropdown {
position: absolute;
width: 150px;
background: #fff;
top: 110%;
left: 0;
border-top: 2px solid #8248ac;
visibility: hidden;
transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
ul.dropdown:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 5px solid #8248ac;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
left: 20px;
top: -10px;
}
ul.dropdown li {
border-top: 1px solid #f7f8f9;
}
ul.dropdown li:first-child {
border-top: none;
}
ul.dropdown li a {
display: inline-block;
padding: 10px 7px !important;
}
.nav-collapse .nav>li:hover ul.dropdown {
visibility: visible;
top: 100%;
}
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<a id="home-nav" href="#">Menu</a>
<ul class="dropdown">
<li class="dropdown">Dropdown
<ul>
<li>sub-dropdown</li>
</ul>
</ul>
</li>
</ul>
</div>
So when user hover on Menu dropdown should come and when user hover in dropdown sub-drop down should come
Thanks in advance!!!
You should hide the sub-menu and show it when you hover on the link, just like the first dropdown
add this code to your css file
ul.dropdown li ul {
display:none;
}
ul.dropdown li.dropdown:hover ul {
display:block;
}
See working snippet:
.nav-collapse .nav li a {
font-size: 13px;
color: #7281a1;
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
text-shadow: none;
padding: 25px 15px 26px 30px;
}
.nav-collapse .nav>li {
margin-left: 3px;
position: relative;
}
.nav-collapse .nav li a#home-nav {
background: url('../images/home.png') 3px center no-repeat;
}
.nav-collapse .nav li a:hover {
text-decoration: underline;
color: #7281a1;
}
ul.dropdown {
position: absolute;
width: 150px;
background: #ccc;
top: 110%;
left: 0;
border-top: 2px solid #8248ac;
visibility: hidden;
transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
ul.dropdown:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 5px solid #8248ac;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
left: 20px;
top: -10px;
}
ul.dropdown li {
border-top: 1px solid #f7f8f9;
}
ul.dropdown li:first-child {
border-top: none;
}
ul.dropdown li a {
display: inline-block;
padding: 10px 7px !important;
}
.nav-collapse .nav>li:hover ul.dropdown {
visibility: visible;
top: 100%;
}
ul.dropdown li ul {
position: absolute;
left: 100%;
top: -2px;
background: #ccc;
width: 100%;
border-top: 2px solid #8248ac;
display: none;
}
ul.dropdown li.dropdown:hover ul {
display: block;
}
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<a id="home-nav" href="#">Menu</a>
<ul class="dropdown">
<li class="dropdown">Dropdown
<ul>
<li>sub-dropdown</li>
</ul>
</ul>
</li>
</ul>
</div>
I have been working on a smooth scroll navigation bar for a website. I have managed to get the navigation bar to scroll to the different sections within the HTML document, and I been trying to get the navigation bar links to become active depending on the section of the webpage you are on.
After playing around with the code I cannot figure out how to do this. What do I need to do?
This is my code:
$('#navbar li').click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
});
#import url(https://fonts.googleapis.com/css?family=Maven+Pro:400,900,700,500);
html{
font-family: 'Maven Pro', sans-serif;
}
body{
background:fixed
url(images/bright_squares.png) #cccccc;
position:relative;
padding:0;
margin:0;
}
#home {padding-top:50px;height:500px;color: #fff; background-image:url(images/random_grey_variations.png);}
#about {padding-top:50px;height:500px;color: #fff;}
#portfolio {padding-top:50px;height:500px;color: #fff;}
#contact {padding-top:50px;height:500px;color: #fff;}
background-dark{
background:fixed
url(images/random_grey_variations.png);
}
#navbar {
position:fixed;
top: 0px;
left: 0px;
right: 0px;
height: 60px;
margin: 0;
padding: 0;
list-style: none;
background: #222;
font-family: 'Maven Pro', sans-serif;
font-size: 18px;
font-weight: 300;
}
#navbar li {
position: relative;
float: left;
line-height: 60px;
background: inherit;
text-align: center;
transition: all .2s;
}
#navbar li a {
position: relative;
display: block;
padding: 0 20px;
line-height: inherit;
color: white;
text-decoration: none;
}
#navbar li:before {
content: '';
display: block;
position: absolute;
left: 50%;
margin-left: -30px;
width: 60px;
height: 60px;
background: #222;
border-radius: 50%;
transform: rotate(45deg);
transition: all 0, background .2s;
}
#navbar li:hover:before {
margin-top: 1px;
border-radius: 50% 50% 0 50%;
transition: all .1s, background .2s, margin-top .2s cubic-bezier(.5,30,.2,0);
}
#navbar li:hover,
#navbar li:hover:before {
background: #3a3a3a;
}
#navbar li.active,
#navbar li.active:before {
background: steelblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="navbar">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div id="home">
<h1>Welcome</h1>
<p>Test</p>
</div>
<div id="portfolio">
<h1>portfolio</h1>
<p>Test</p>
</div>
<div id="contact">
<h1>contact</h1>
<p>Test</p>
</div>
<div id="about">
<h1>About Me</h1>
<p>Test</p>
</div>
I think this might answer your question. Just add this code inside the click function you already have.
$($(this).children().attr('href')).addClass('selected').siblings('div').removeClass('selected');
You will need to change the home link to #home instead of # though
If you want to forgo all of that, here's the even quicker version.
<script>
$('#navbar li').click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
var x = $($(this).children().attr('href')).first().offset().top
$('body').animate({
scrollTop: x
}, 2000);
});
</script>
This will add the scrolling animation I think you're looking for.
I have a web site that uses a sliding menu. By default is sets left to -370px. This shows only the "MENU" text on the screen (see pictures below). When a user mouses over the menu it expands to the right and allows the user to select a menu item. If the user expands one of the items to show sub items, the menu grows as necessary. The issue is when the menu slides back in to the left. I would like the menu to ONLY show "MENU" regardless of the length of the text of the menu items. It works out to only showing the right 31px of the menu.
#navigation_slideout ul li.expanding{
height: auto
}
.expanding label{
/*background-color: #AAAFAB;
border-radius: 5px;
color: white;
*/
padding: 3px;
padding-left: 25px;
}
#navigation_slideout ul li ul li a.expanding1 {
padding:0;
margin:0;
height: auto ;
}
.expanding li > ul {
left:-35px;
position:relative;
width:100%;
}
.expanding input[type=checkbox] {
display: none;
}
.expanding input[type=checkbox] ~ ul {
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
white-space:nowrap;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.expanding input[type=checkbox]:checked ~ ul {
max-height: 100%;
max-width: 100%;
opacity: 1;
}
.expanding input[type=checkbox] + label:before{
transform-origin:25% 50%;
border: 8px solid transparent;
border-width: 8px 12px;
border-left-color: white;
margin-left: -20px;
width: 0;
height: 0;
display: inline-block;
text-align: center;
content: '';
color: #AAAFAB;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
position: absolute;
margin-top: 1px;
}
.expanding input[type=checkbox]:checked + label:before {
transform: rotate(90deg);
/*margin-top: 6px;
margin-left: -25px;*/
}
#navigation_slideout {
position: fixed;
top: 85px;
left: -370px;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
box-shadow: 0 0 40px #222;
}
#navigation_slideout:hover {
left: -39px;
}
#navigation_slideout ul
{
list-style: none;
}
#navigation_slideout ul li {
background: #548EBE;
width: auto;
min-width:325px;
/*height: 30px;*/
height: auto;
text-align: left;
padding-top: 5px;
font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 12pt;
color:white;
font-weight:bold;
}
#navigation_slideout ul li a{
color: #000;
text-decoration: none;
font-weight:bold;
display: block;
background-color:#548EBE;
color:white;
}
#navigation_slideout ul li ul{
}
#navigation_slideout ul li ul li {
width:10px;
position:relative;
left:-41px;
}
#navigation_slideout ul li ul li a {
background:#548EBE;
width:326px;
height:30px;
text-align:left;
padding-top:5px;
font-family: helvetica, arial, sans-serif;
font-size: 12pt;
color:white;
font-weight:bold;
}
#menu{
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14pt;
color:white;
font-weight:bold;
margin:0px 0px 0px 0px;
right:0px;
padding:0px 0px 0px 0px
}
#menu a{
font-size: 14pt;
color:white;
font-weight:bold;
text-decoration:none;
}
table.nospacing {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
table.nospacing th, td {
padding: 0;
}
.menu-col{max-width: 30px;}
<div id="navigation_slideout" style="background-color:#548EBE;z-index:1" onclick="">
<table class="nospacing" style="border-style:none">
<tr>
<td style="border-style:solid">
<ul>
<li> Home</li>
<li> About</li>
<li><a href="contact/contacts.html" > Contacts</a></li> </ul>
<hr width="200px">
<ul style="position:relative">
<li class="expanding"><input class="expanding" type="checkbox" id="cb1"><label class="expanding" for="cb1">Transitioning A Subject</label>
<ul class="expanding">
<li class="expanding1"><a class="expanding1" href="#" > Overview - Transitioning a Subject</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Pick A Topic Area</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Design Topic Area</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Set Up Config Mgmt</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Develop Topic Area</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Review Topic Area</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Publish Topic Area</a></li>
</ul>
</li>
<li class="expanding"><input class="expanding" type="checkbox" id="cb2"><label class="expanding" for="cb2">Developing the Topic Area</label></li>
<li class="expanding"><input class="expanding" type="checkbox" id="cb3"><label class="expanding" for="cb3">Useful HTML Techniques</label></li>
<li class="expanding"><input class="expanding" type="checkbox" id="cb4"><label class="expanding" for="cb4">Best Practice Examples</label></li>
</ul>
</td>
<td class="menu-col" style="border-left:medium;border-left-color:white;border-left-style:solid">
<p id="menu">MENU</p>
</td>
</tr>
</table>
</div>
Are you looking for something like this?
https://jsfiddle.net/DIRTY_SMITH/ru9joppk/2/
Javascript:
function width(){
var width = document.getElementById("navigation_slideout").offsetWidth;
var offsetWidth = width - (width + width - 35);
document.getElementById('navigation_slideout').style.width = width + "px";
document.getElementById('navigation_slideout').style.left = offsetWidth + "px";
}
CSS
#navigation_slideout:hover {
left: -39px !important;
}
I'm trying to do a expandable menu in jQuery and CSS3, here is the fiddle:
http://jsfiddle.net/mNcuQ/3/
When you click the slidebar, the titles section is showed. But I'm afraid it doesn't look properly. What I'm trying to do is when the .expanded class is active and the width of the slidebar is modified ( with the transition finished ) then show the titles of the menu with fade in effect. As I do now, the titles of the menu are not respeting the display: inline-block. Surely I'm missing something...
Do you have any idea or tip to do it? What is better to use in this case: CSS3 transition or jQuery animation?
Here is the code of the fiddle:
HTML
<div id="sidebar">
<a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<nav id="nav" class="navigation" role="navigation">
<ul class="unstyled">
<li class="active" data-section="1"><i class="icon-home"></i> <span>Home</span>
</li>
<li data-section="2" class=""><i class="icon-rocket"></i> <span>Services</span>
</li>
<li data-section="3" class=""><i class="icon-laptop"></i> <span>Projects</span>
</li>
<li data-section="6" class=""><i class="icon-money"></i> <span>Price</span>
</li>
<li data-section="4" class=""><i class="icon-pencil"></i> <span>Team</span>
</li>
<li data-section="5" class="last"><i class="icon-envelope"></i> <span>Contact</span>
</li>
</ul>
</nav>
</div>
JS
$(document).ready(function ($) {
$('#sidebar').click(function () {
$('html').toggleClass('expanded');
});
});
CSS
#sidebar {
background-color: #151515;
height: 120%;
padding: 0;
position: fixed;
left: 0;
top: 0;
width: 50px;
z-index: 2;
cursor:pointer;
overflow-y: hidden;
}
#nav {
margin-top: 80px;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav ul li i {
font-size : 15px;
}
#nav ul li {
color: #F1F1F1;
cursor: pointer;
display: inline-block;
line-height: 22px;
filter: alpha(opacity=40);
font-size: 16px;
font-size: 1.6rem;
font-style: normal;
font-weight: 100;
opacity: .4;
padding: 8px 0 8px 15px;
text-transform: uppercase;
width: 70%;
}
#sidebar {
-webkit-transition: width 500ms ease;
-moz-transition: width 500ms ease;
-ms-transition: width 500ms ease;
-o-transition: width 500ms ease;
transition: width 500ms ease;
}
#nav ul li.active {
filter: alpha(opacity=100);
opacity: 1;
}
#nav ul li.last {
padding-right: 0px;
}
#nav li span {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: 10px;
width: 0;
}
.btn-navbar {
cursor: pointer;
filter: alpha(opacity=40);
float: left;
margin: 20px 5px 10px;
opacity: .4;
padding: 7px 10px;
}
.btn-navbar .icon-bar {
background-color: #F5F5F5;
border-radius: 1px 1px 1px 1px;
box-shadow: none;
display: block;
height: 2px;
width: 18px;
}
/* Expanded Nav Styling */
.expanded #container {
left: 100px;
transform: translate3d(50px, 0px, 0px) scale3d(1, 1, 1);
}
.expanded #sidebar {
width: 150px;
}
.expanded #nav li {
width: 90%;
}
.expanded #nav li span {
display: inline-block;
height: auto;
opacity: 1;
overflow: visible;
width: auto;
}
If you need more info, let me know and I'll edit the post.
use transition-delay maybe?
Fiddle (moved revelant css classes to bottom)
#nav li span {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: 10px;
width: 0;
transition:opacity 0.5s ease; // ease opacity
}
.expanded #nav li span {
display: inline-block;
height: auto;
opacity: 1;
overflow: visible;
width: auto;
transition-delay: 500ms; //delay transition by the same amount of sidebar width transition time
}
the problem is that you expanded container is too small to position the headlines correct, make it a bit larger and it will work
.expanded #sidebar {
width: 180px;
}