I am using the following script as navbar, however I can't figure out how to make the menus/submenus respect the screen sides, and not continue to open outside of the screen border.. I don't want to change the default behavior (direction) of all the menus, just to change it it it would be cut by any of the sides..
I found a similar post (and another one too), but I don't know how to implement the same answer to this current code.
Example of the menu being cut by the side of the monitor:
Here is the code snippet, along with jsfiddle link too.
$(document).ready(function() {
/* MAIN MENU */
$('#main-menu > li:has(ul.sub-menu)').addClass('parent');
$('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');
$('#menu-toggle').click(function() {
$('#main-menu').slideToggle(300);
return false;
});
$(window).resize(function() {
if ($(window).width() > 700) {
$('#main-menu').removeAttr('style');
}
});
});
body {
background-color: #eee;
background-image: url(../images/patterns/light_toast.png);
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
a {
color: #23dbdb;
text-decoration: none;
}
a:hover {
color: #000;
}
ol,
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#wrap {
margin: 0 auto;
}
.inner {
margin: 0 auto;
max-width: 940px;
padding: 0 40px;
}
.relative {
position: relative;
}
.right {
float: right;
}
.left {
float: left;
}
/* HEADER */
#wrap>header {
background-color: #333;
padding-bottom: 20px;
}
.logo {
display: inline-block;
font-size: 0;
padding-top: 15px;
}
#navigation {
position: absolute;
right: 40px;
bottom: 0px;
}
#menu-toggle {
display: none;
float: right;
}
/* HEADER > MENU */
#main-menu {
float: right;
font-size: 0;
margin: 10px 0;
}
#main-menu>li {
display: inline-block;
margin-left: 30px;
padding: 2px 0;
}
#main-menu>li.parent {
background-image: url(../images/plus-gray.png);
background-size: 7px 7px;
background-repeat: no-repeat;
background-position: left center;
}
#main-menu>li.parent>a {
padding-left: 14px;
}
#main-menu>li>a {
color: #eee;
font-size: 14px;
line-height: 14px;
padding: 30px 0;
text-decoration: none;
}
#main-menu>li:hover>a,
#main-menu>li.current-menu-item>a {
color: #23dbdb;
}
/* HEADER > MENU > DROPDOWN */
#main-menu li {
position: relative;
}
ul.sub-menu {
/* level 2 */
display: none;
left: 0px;
top: 38px;
padding-top: 10px;
position: absolute;
width: 150px;
z-index: 9999;
}
ul.sub-menu ul.sub-menu {
/* level 3+ */
margin-top: -1px;
padding-top: 0;
left: 149px;
top: 0px;
}
ul.sub-menu>li>a {
background-color: #333;
border: 1px solid #444;
border-top: none;
color: #bbb;
display: block;
font-size: 12px;
line-height: 15px;
padding: 10px 12px;
}
ul.sub-menu>li>a:hover {
background-color: #2a2a2a;
color: #fff;
}
ul.sub-menu>li:first-child {
border-top: 3px solid #23dbdb;
}
ul.sub-menu ul.sub-menu>li:first-child {
border-top: 1px solid #444;
}
ul.sub-menu>li:last-child>a {
border-radius: 0 0 2px 2px;
}
ul.sub-menu>li>a.parent {
background-image: url(../images/arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;
}
#main-menu li:hover>ul.sub-menu {
display: block;
/* show the submenu */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div id="wrap">
<header>
<div class="inner relative">
<a class="logo" href="#"><img src="https://www.gravatar.com/avatar/851659509f07dd2fe27882da61f0da0a?s=64" alt="fresh design web"></a>
<a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
<nav id="navigation">
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Features
<ul class="sub-menu">
<li><i class="icon-wrench"></i> Elements</li>
<li><i class="icon-credit-card"></i> Pricing Tables</li>
<li><i class="icon-gift"></i> Icons</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li class="parent">
Blog
<ul class="sub-menu">
<li>Large Image</li>
<li>Medium Image</li>
<li>Masonry</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages ></a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
<li>Double Sidebar</li>
<li>Single Post</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
in your sub-sub menus you're aligning based on left margin at 149px, just use the same attribute but instead for the right. right:149px; instead of left:149px;
ul.sub-menu ul.sub-menu {
/* level 3+ */
right: 149px;
}
Also you can align the sub menus to the left of the nav items. To do this use :
ul.sub-menu {
/* level 2 */
right: 0;
left: initial;
}
I included both examples in this snippet:
$(document).ready(function() {
/* MAIN MENU */
$('#main-menu > li:has(ul.sub-menu)').addClass('parent');
$('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');
$('#menu-toggle').click(function() {
$('#main-menu').slideToggle(300);
return false;
});
$(window).resize(function() {
if ($(window).width() > 700) {
$('#main-menu').removeAttr('style');
}
});
});
body {
background-color: #eee;
background-image: url(../images/patterns/light_toast.png);
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
a {
color: #23dbdb;
text-decoration: none;
}
a:hover {
color: #000;
}
ol,
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#wrap {
margin: 0 auto;
}
.inner {
margin: 0 auto;
max-width: 940px;
padding: 0 40px;
}
.relative {
position: relative;
}
.right {
float: right;
}
.left {
float: left;
}
/* HEADER */
#wrap>header {
background-color: #333;
padding-bottom: 20px;
}
.logo {
display: inline-block;
font-size: 0;
padding-top: 15px;
}
#navigation {
position: absolute;
right: 40px;
bottom: 0px;
}
#menu-toggle {
display: none;
float: right;
}
/* HEADER > MENU */
#main-menu {
float: right;
font-size: 0;
margin: 10px 0;
}
#main-menu>li {
display: inline-block;
margin-left: 30px;
padding: 2px 0;
}
#main-menu>li.parent {
background-image: url(../images/plus-gray.png);
background-size: 7px 7px;
background-repeat: no-repeat;
background-position: left center;
}
#main-menu>li.parent>a {
padding-left: 14px;
}
#main-menu>li>a {
color: #eee;
font-size: 14px;
line-height: 14px;
padding: 30px 0;
text-decoration: none;
}
#main-menu>li:hover>a,
#main-menu>li.current-menu-item>a {
color: #23dbdb;
}
/* HEADER > MENU > DROPDOWN */
#main-menu li {
position: relative;
}
ul.sub-menu {
/* level 2 */
display: none;
top: 38px;
padding-top: 10px;
position: absolute;
width: 150px;
z-index: 9999;
right:0;
left:initial;
}
ul.sub-menu ul.sub-menu {
/* level 3+ */
margin-top: -1px;
padding-top: 0;
right: 149px;
top: 0px;
}
ul.sub-menu>li>a {
background-color: #333;
border: 1px solid #444;
border-top: none;
color: #bbb;
display: block;
font-size: 12px;
line-height: 15px;
padding: 10px 12px;
}
ul.sub-menu>li>a:hover {
background-color: #2a2a2a;
color: #fff;
}
ul.sub-menu>li:first-child {
border-top: 3px solid #23dbdb;
}
ul.sub-menu ul.sub-menu>li:first-child {
border-top: 1px solid #444;
}
ul.sub-menu>li:last-child>a {
border-radius: 0 0 2px 2px;
}
ul.sub-menu>li>a.parent {
background-image: url(../images/arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;
}
#main-menu li:hover>ul.sub-menu {
display: block;
/* show the submenu */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div id="wrap">
<header>
<div class="inner relative">
<a class="logo" href="#"><img src="https://www.gravatar.com/avatar/851659509f07dd2fe27882da61f0da0a?s=64" alt="fresh design web"></a>
<a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
<nav id="navigation">
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Features
<ul class="sub-menu">
<li><i class="icon-wrench"></i> Elements</li>
<li><i class="icon-credit-card"></i> Pricing Tables</li>
<li><i class="icon-gift"></i> Icons</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li class="parent">
Blog
<ul class="sub-menu">
<li>Large Image</li>
<li>Medium Image</li>
<li>Masonry</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages ></a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
<li>Double Sidebar</li>
<li>Single Post</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
I guess the real question here is, where do you want it to go? If there's no page real estate to the right of your menu, you can't place the submenu to the right, you have to place it to the left.
ul.sub-menu ul.sub-menu { /* level 3+ */
margin-top: -1px;
padding-top: 0;
left: -149px;
top: 0px;
}
Note, the left value is changed from 149px to -149px. That places the submenu to the left (where you have screen real estate), and not to the right, where you don't.
Related
Below is the HTML, CSS and JavaScript codes that I have used to create the navigation bar of my website;
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0"
}
function hideMenu(){
navLinks.style.right = "-700px"
}
header{
background-color: black;
background-position: center;
background-size: cover;
height: 12vh;
width: 100%;
z-index: 1;
position: fixed;
}
.logo img{
float: left;
width: 70px;
margin-top: 10px;
}
.main-nav{
float: right;
margin-top: 30px;
list-style: none;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: white;
padding: 5px 10px;
font-size: 15px;
font-weight: bold;
font-family: sans-serif;
text-decoration: none;
}
.main-nav li.active a{
border: 2px solid #a40000;
background-color: black;
}
.main-nav li a:hover{
border: 2px solid #a40000;
background-color: black;
}
<header>
<div class="logo">
<img src="logokm.png" alt="logokm">
<ul class="main-nav" id="navLinks">
<img class="hm" src="close1.png" alt="c" onclick="hideMenu()">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SKILLS</li>
<li>SERVICES</li>
<li>PROJECTS</li>
<li>CONTACT ME</li>
</ul>
<img class="hm1" src="open1.png" alt="o" onclick="showMenu()">
</div>
</header>
Problem
" float: right" poorly working in responsive class
Basically, I am trying to place my image logo in the right-up corner for a semi-lang case but every manipulation on .logo force navigation bar to change its values.
Question
How can I align the logo to the right-up corner?
What I've tried
let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', function () {
mainNav.classList.toggle('active');
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Josefin Sans', sans-serif;
}
.navbar {
background-image: url("bg-mob.png");
background-size: 100vw;
font-size: 18px;
/*background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);*/
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
display: none;
}
.nav-links, .logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
/*margin-right: auto;*/
}
.logo img {
width: 150px;
/*background-color: white;*/
}
.navbar-toggle {
position: absolute;
top: 15px;
left: 20px;
cursor: pointer;
color: rgba(255,255,255,0.8);
font-size: 24px;
}
.active {
display: block;
}
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<img src="https://via.placeholder.com/50" alt="">
</span>
<img src="https://via.placeholder.com/150/0000FF">
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</nav>
Positions absolute and floats do not play well together and are a headache on their own when you try to align them with other elements.
Thankfully you do not have to mess with them, since display:flex is a thing
What I would do is add a wrapper div around your toggler and logo and make that flex and justify the two items on the edges, like so:
<nav class="navbar">
<div style="display:flex; justify-content: space-between;">
<span class="navbar-toggle" id="js-navbar-toggle">
<img src="menuicon.png.png" alt="">
</span>
<img src="logo-blue.png">
</div>
<ul class="main-nav" id="js-menu">
[...]
And this way you can remove the absolute position from your toggler
You can use text-align: right; in .navbar:
let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', function () {
mainNav.classList.toggle('active');
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Josefin Sans', sans-serif;
}
.navbar {
background-image: url("bg-mob.png");
background-image: url("https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w1024-h683-n-l50-sg-rj");
background-size: 100vw;
font-size: 18px;
/*background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);*/
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
text-align: right; /* added */
}
.main-nav {
list-style-type: none;
display: none;
}
.nav-links, .logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
/*margin-right: auto;*/
}
.logo img {
width: 150px;
/*background-color: white;*/
}
.navbar-toggle {
position: absolute;
top: 15px;
left: 20px;
cursor: pointer;
color: rgba(255,255,255,0.8);
font-size: 24px;
}
.active {
display: block;
}
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w24-h16-n-l50-sg-rj" alt="">
</span>
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w150-h100-n-l50-sg-rj">
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</nav>
I am trying to use slideToggle() function to create a submenu but it's not working. I saw some examples and it was on <div>s not <ul>s so it's only working with <div>s ? Here's my code on fiddle : Fiddle
I am inserting the <script> tags correctly in my HTML and my other jQuery codes run correctly.
You are missing jQuery library in your fiddle. Also there is a typo in your code, callback function should be function() not Function()
$(document).ready(function() {
$('.mainmenu').click(function() {
// ----^----- f should be small letter
$('.submenu').slideToggle('fast');
});
});
.mainmenu {
cursor: pointer;
color: #ffffff;
text-align: center;
display: block;
}
.mainmenu p {
font-size: 20px;
line-height: 10px;
}
.submenu {
list-style-type: none;
padding: 0;
text-align: center;
border: 2px solid black;
border-top: 0;
border-radius: 0 0 10px 10px;
background-color: #464646;
width: 90%;
margin: 0 auto;
margin-bottom: 5px;
display: none;
}
.submenu li {
border-bottom: 2px solid white;
}
.submenu li:last-child,
.submenu li:last-child a:last-child {
border-bottom: 0;
border-radius: 0 0 10px 10px;
}
.submenu a:hover {
background-color: aliceblue;
color: #000000;
}
#sidebar {
background-color: white;
float: right;
}
#sidebar>ul {
list-style-type: none;
margin: 0;
padding: 20px;
}
#sidebar>ul >li {
position: relative;
width: 21em;
background-color: #1a8891;
border: 2px solid #0c383a;
margin-bottom: 5px;
border-radius: 20px;
}
#sidebar a:link,
#sidebar a:visited {
display: block;
position: relative;
width: 100%;
text-align: center;
line-height: 50px;
font-size: 20px;
color: white;
text-decoration: none;
}
#sidebar li:hover {
background-color: #156b72;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar">
<ul>
<li class="mainmenu">
<div class="arrow-up"></div>
<p>Text</p>
</li>
<ul class="submenu">
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
</ul>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
</ul>
</div>;
I am trying to put the finishing touches on this slide out navigation but am running into one final problem.
You can see it here: http://jsfiddle.net/93chsw11/1/
Although you should know, it's missing Glyphicons so it doesn't look as good on there, the left of each link has an icon and is clickable to open that section of links. You can still click the right side of the empty space, though.
Now, the problem is that when the navigation is open the content becomes horizontally scrollable and if you scroll to the right it goes on top of the nav bar.
I would like it to either scroll with the navigation, keeping them side by side, or somehow scroll underneath the nav bar. I've looked all around for solutions but nothing fixes this problem without causing another problem.
I'm open to other suggestions of maybe different routes to take, maybe with margins instead of left position or something along those lines? I just want it to look how it does now, with the Glyphicons to the left of the section names, and when the nav is collapsed to show the icons.
Thanks in advance for any and all help :)
CSS for navigation positioning:
#sidebar {
position: fixed;
left: 0;
width: 200px;
height: 100%;
color: #F0F0F0;
background-color: #2D5B81;
padding-top: 40px;
overflow: auto;
}
CSS for content positioning:
#newcontent {
position: absolute;
background-color: #fff;
left: 50px;
top: 50px;
width: 96%;
padding-left: 15px;
padding-top: 5px;
}
jQuery functions for opening/closing:
$("#hide-nav").click(function() {
$("#newcontent").animate({'left':"50px"}, 250);
$(".sublinks").hide(250);
});
$(".openall").click(function(){
$("#newcontent").animate({"left": "205px"}, 250);
$(".sublinks").show(250);
});
$(".hideall").click(function(){
$(".sublinks").hide(250);
});
$(".navLink").click(function() {
$("#newcontent").animate({"left": "205px"}, 250);
//$("#newcontent").animate({'marginLeft':"205px"}, 250);
$(this).parent().children(".sublinks").slideToggle(250, function() {
$(this).parent().children(".sublinks").toggleClass('sublinks-active');
});
});
You can achieve what you're trying to do using z-index over here coupled with a little of jQuery. You can set the z-index of your sidebar to a high value such as 9999 when the openall button is cicked and you can set the z-index back to 0 when the sidebar is hidden. These are the two jQuery functions that I've modified a little in your code:
$("#hide-nav").click(function() {
$("#newcontent").animate({'left':"30px"}, 250);
$(".sublinks").hide(250);
$("#sidebar").css("z-index","0");
});
$(".openall").click(function(){
$("#newcontent").animate({"left": "205px"}, 250);
$(".sublinks").show(250);
$("#sidebar").animate({"z-index": "99999"}, 250);
});
$("#hide-nav").click(function() {
$("#newcontent").animate({
'left': "30px"
}, 250);
$(".sublinks").hide(250);
$("#sidebar").css("z-index", "0");
});
$(".openall").click(function() {
$("#newcontent").animate({
"left": "205px"
}, 250);
$(".sublinks").show(250);
$("#sidebar").animate({"z-index": "99999"}, 250);
});
$(".hideall").click(function() {
$(".sublinks").hide(250);
});
$(".navLink").click(function() {
$("#newcontent").animate({
"left": "205px"
}, 250);
$(this).parent().children(".sublinks").slideToggle(250, function() {
$(this).parent().children(".sublinks").toggleClass('sublinks-active');
});
});
#sidebar {
position: fixed;
left: 0;
width: 200px;
height: 100%;
/*margin-left: -150px;*/
color: #F0F0F0;
background-color: #2D5B81;
padding-top: 40px;
overflow: auto;
}
#sidebar::-webkit-scrollbar {
display: none;
}
#open-close {
cursor: pointer;
text-align: left;
margin-right: 10px;
margin-top: -10px;
margin-bottom: 15px;
font-size: 0.8em;
}
#open-close span {
padding: 10px;
margin-top: 5px;
}
#hide-nav {
cursor: pointer;
padding: 5px;
font-size: 0.7em;
font-weight: 600;
margin-top: -40px;
margin-left: -27px;
margin-right: 10px;
float: right;
}
#nav li {
list-style-type: none;
}
.navBG {
padding-right: 20px;
border-top: 1px solid #6c8ca6;
border-bottom: 1px solid #6c8ca6;
margin-bottom: -1px;
}
.navLink {
display: block;
width: 100%;
color: #d5dee5;
padding: 10px;
margin-left: 20px;
font-weight: 550;
text-decoration: none;
}
.navLink:hover {
color: #fff;
}
.navGlyph {
margin-right: 20px;
margin-left: 7px;
float: left;
}
.sublinks {
display: block;
width: 100%;
font-size: 0.8em;
margin-top: 5px;
display: none;
color: #c0cdd9;
background-color: #285174;
}
.sublinks li {
cursor: pointer;
border-left: 1px solid #6c8ca6;
}
.sublinks li:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.sublinks li a {
display: block;
text-decoration: none;
color: #c0cdd9;
padding: 5px;
padding-left: 0;
margin-right: 10px;
}
.sublinks li a:hover {
color: #fff;
font-weight: 500;
}
.sublinks-active {
display: block;
}
#newcontent {
position: absolute;
background-color: #fff;
left: 30px;
height: 100%;
width: 96%;
padding-left: 15px;
padding-top: 5px;
}
#newContent::-webkit-scrollbar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
<nav id="nav">
<li id="open-close">
<span class="openall">+</span>
<span class="hideall">-</span>
</li>
<span id="hide-nav">Close</span>
<li class="navBG">
<a href="javascript:void(0);" class="navLink">
General Info
</a>
<ul class="sublinks">
<li>– Employee Directory</li>
<li>– Documents</li>
<li>– FTP</li>
<li>– CNC Bulletin Board</li>
<li>– Manage</li>
</ul>
</li>
<li class="navBG">
<a href="javascript:void(0);" class="navLink">
Job Info
</a>
<ul class="sublinks">
<li>– Job List</li>
<li>– Files Required</li>
<li>– Incoming Data List</li>
<li>– Signoffs</li>
<li>– Leader List</li>
<li>– Milestone/Timelines</li>
</ul>
</li>
<li class="navBG">
<a href="javascript:void(0);" class="navLink">
QIR Info
</a>
<ul class="sublinks">
<li>– Open QIRs</li>
<li>– Search QIRs</li>
</ul>
</li>
<li class="navBG">
<a href="javascript:void(0);" class="navLink">
Reports
</a>
<ul class="sublinks">
<li>– Tryout Reports</li>
<li>– R&D Reports</li>
<li>– Tech. Advancements</li>
<li>– Budget Reports</li>
<li>– R&D Job Summary</li>
</ul>
</li>
<li class="navBG">
<a href="javascript:void(0);" class="navLink">
NEW
</a>
<ul class="sublinks">
<li>– New Job</li>
<li>– New Incoming</li>
<li>– New Quote</li>
<li>– New Program</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="newcontent">
CONTENT HERE
</div>
jsFiddle Demo.
You can see in the above example that once the sidebar is open, you can scroll horizontally and sidebar always stays on the top and the content scrolls underneath it.
If you don't mind losing the "fixed" nature of the sidebar, you can set the sidebar and content divs to inline-block, then animate the width of the sidebar when closing/opening.
Fiddle example: http://jsfiddle.net/93chsw11/14/
Here's what that would look like CSS wise:
#sidebar {
display: inline-block;
vertical-align: top;
width: 200px;
height: 100%;
/*margin-left: -150px;*/
color: #F0F0F0;
background-color: #2D5B81;
padding-top: 40px;
overflow: auto;
}
#sidebar::-webkit-scrollbar {
display: none;
}
#open-close {
cursor: pointer;
text-align: left;
margin-right: 10px;
margin-top: -10px;
margin-bottom: 15px;
font-size: 0.8em;
}
#open-close span {
padding: 10px;
margin-top: 5px;
}
#hide-nav {
cursor: pointer;
padding: 5px;
font-size: 0.7em;
font-weight: 600;
margin-top: -40px;
margin-left: -27px;
margin-right: 10px;
float: right;
}
#nav li {
list-style-type: none;
}
.navBG {
padding-right: 20px;
border-top: 1px solid #6c8ca6;
border-bottom: 1px solid #6c8ca6;
margin-bottom: -1px;
}
.navLink {
display: block;
width: 100%;
color: #d5dee5;
padding: 10px;
margin-left: 20px;
font-weight: 550;
text-decoration: none;
}
.navLink:hover {
color: #fff;
}
.navGlyph {
margin-right: 20px;
margin-left: 7px;
float: left;
}
.sublinks {
display: block;
width: 100%;
font-size: 0.8em;
margin-top: 5px;
display: none;
color: #c0cdd9;
background-color: #285174;
}
.sublinks li {
cursor: pointer;
border-left: 1px solid #6c8ca6;
}
.sublinks li:hover {
background-color: rgba(255,255,255,0.05);
}
.sublinks li a {
display: block;
text-decoration: none;
color: #c0cdd9;
padding: 5px;
padding-left: 0;
margin-right: 10px;
}
.sublinks li a:hover {
color: #fff;
font-weight: 500;
}
.sublinks-active {
display: block;
}
#newcontent {
background-color: #fff;
height: 100%;
padding-left: 15px;
padding-top: 5px;
display: inline-block;
vertical-align: top;
}
#newContent::-webkit-scrollbar {
display: none;
}
And the jQuery:
$("#hide-nav").click(function() {
$(this).add(".hideall").hide();
$("#sidebar").animate({width: "30px"},250);
$(".sublinks").hide(250);
});
$(".openall").click(function(){
$("#hide-nav").add(".hideall").show();
$("#sidebar").animate({width: "200px"},250);
$(".sublinks").show(250);
});
$(".hideall").click(function(){
$(".sublinks").hide(250);
});
$(".navLink").click(function() {
$(this).parent().children(".sublinks").slideToggle(250, function() {
$(this).parent().children(".sublinks").toggleClass('sublinks-active');
});
});
I'd like to create a navigation menu like this:
|main-item1|
|main-item2| |sub-item1| |sub-item2| |sub-item3|
|main-item3|
|main-item4|
what I see now is this:
|main-item1|
|main-item2|
|sub-item1| |sub-item2| |sub-item3| |main-item3| |main-item4|
I've found another question like this here on stackoverflow, but I couldn't manage to adapt the code.
The html code I have is this:
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li>Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
And this is the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative
}
It would be ok to use some jquery plugin, also because I'd like to add some effect on hovering, but I thought it was better to align everything with css first.
Thanks
try this:
#mainmenu>li {
height: 40px;
margin: 5px;
position: relative;
clear:both
}
and float to links:
#mainmenu a {
float:left;
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
overflow: hidden;
}
this is what you may want:
the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative;
}
#mainmenu .submenu li{
margin:0px;
}
and the html
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li style="clear:both;">Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
In html I added at "servizi" float left and in css i added :
#mainmenu .submenu li{
margin:0px;
}
So they are now at the same level.