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');
});
});
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>
I'm trying to copy a Sit the Test website, and got stuck in the border on the current page.
What I wanted is to make a border in Build test so it looks like a current page.
I have this HTML.
* {
text-decoration: none;
}
body {
background-color: #D9E0E6;
}
header {
height: 100px;
background-color: #323b44;
}
.web-logo img {
width: 300px;
height: 60px;
display: block;
float: left;
margin: 20px 0 0 30px;
}
nav {
float: right;
width: 600px;
text-align: right;
margin: 15px 30px 15px 0;
}
nav ul {
display: flex;
justify-content: center;
line-height: 60px;
text-align: center;
}
nav ul li {
flex: 1;
}
nav ul li a {
display: block;
font-family: catamaran, sans-serif;
font-size: 18px;
color: #f2f2f2;
border: 3px solid transparent;
}
nav ul li a.current {
/* I'm trying to make a border here on the current page which is the Build Test*/
border: 3px solid #80dbb8;
border-radius: 10px;
color: #80dbb8;
}
nav ul li a:hover {
border: 3px solid #80dbb8;
border-radius: 7px;
}
```
<header>
<div class="web-logo"><img src="img/logo-bd2b73d4287cc1b0b5d0562cbf409217.png" alt="Site the Test Logo"></div>
<nav id="nav">
<ul>
<li>Build Test</li>
<li>Browse Test</li>
<li>Help</li>
<li>Sign In</li>
</ul>
</nav>
</header>
does anyone can help?
These are for the design only I'm not working yet with the page transition.
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.
I've seen many questions similar but haven't found the answer to my problem yet.
I need to make this menu dropdown responsive with the page but as it is absolute , I am not sure how to make this happen. Using JS is not a problem eather .Any solution will do.
header{
nav{
min-width: 280px;
max-width: 479px;
margin: 0 auto;
clear: both;
position: relative;
.logo{
padding: 13px 0 10px 9px;
float: left;
}//End of logo
ul{
list-style-type: none;
border-bottom: 2px solid $white;
margin-bottom: 6px;
li{
line-height: 23px;
.nav-img{
line-height: 50px;
float: right;
margin-right: 18px;
}
.nav-content{
position: absolute;
top: 60px;
overflow: hidden;
background-color: $dropdownColor;
//margin: 0 auto;
min-width: 280px;
//width: 100%;
max-width: 440px;
padding: 0px 20px;
max-height: 0px;
.arrow{
float: right;
padding-top: 13px;
}
.nav-sub{
.second-menu{
li{
font-size: 12px;
display: inline-block;
line-height: 8px;
}
li+li:before {
padding: 2px;
color: $white;
content: "/\00a0";
}
}
a{
display: inline-block;
text-decoration: none;
color: $white;
font-weight: bold;
}
input{
width: 100%;
padding: 5px;
border: none;
background-image: url("../images/search_icon.png");
background-repeat: no-repeat;
background-position: center right 10px;
margin: 15px 0;
}
}
}
}
li:first-child{
padding-top: 13px;
}
li:last-child{
padding-bottom: 20px;
}
}//End of menu
}//End of nav
}//End of header
<header>
<nav>
<div class="logo">
<img src="./images/logo.png" alt="Error loading image!">
</div>
<ul>
<li>
<img src="./images/menu_shape.png" alt="Error loading image!">
<div class="nav-content">
<a class="arrow" href=""><img src="./images/dropdown_arrow.png" alt="Error loading image!"></a> <div class="nav-sub">
<ul>
<li>About Us
<!--<ul>
<li>Production</li>
<li>Energy & Commodities</li>
<li>Transport</li>
<li>Industrial Services</li>
</ul>-->
</li>
<li>Divisions</li>
<li>Investors</li>
<li>Corporate Responsibility</li>
</ul>
<ul class="second-menu">
<li>Home</li>
<li>Media Centre</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
<input type="search" placeholder="Search">
</div>
</div>
</li>
</ul>
</nav>
</header>
Here are the images.
I know that I can put the width in pixels but it won't be responsive than.
Using media queries to change css rules by resolution
https://developer.mozilla.org/en/docs/Web/CSS/Media_Queries/Using_media_queries
I am trying to get my nav bar dropdown list to work using JavaScript.
I got everything working except for when I hover over the rest of the items, the dropdown only shows up under the first link? I tried working around it and putting it in lists but I'd rather not and when I do I just then end up ruining the whole nav bar.
Here's what I mean:
style.css
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#title {
background-color:white;
float: left;
padding-left: 2%;
position: absolute;
padding-top: 1.5%;
}
#nav {
background-color: white;
height: 79px;
min-width: 600px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 2;
}
#nav a {
text-decoration: none;
}
#nav a:link {
color: grey;
}
#nav a:hover {
background-color: lightgrey;
}
#nav a:visited {
color: maroon;
}
#nav a:active {
color: maroon;
}
#navLink {
padding-top: 2.5%;
padding-right: 2%;
letter-spacing: 3px;
float: right;
}
#navLink div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: whitesmoke;
}
#navLink div a {
position: relative;
display: block;
margin: 0;
width: auto;
padding: 5px 10px;
text-align: left;
}
.container {
width: 100%;
}
#content {
padding-top: 10%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom:0px;
left:0xp;
width:100%;
color:white;
clear:both;
text-align:center;
padding:5px;
}
.stopFloat {
clear:both;
left: 0px;
right: 0px;
bottom: 0px;
}
Here's my navbar code snippet:
<div id="nav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div id="navLink">
<a href="index.html"
onmouseover="dropDown('dd1')"
onmouseout="closeddtime()">Home</a>
<div id="dd1"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
Video
Who
What
</div>
<a href="02_advLayout/index.html"
onmouseover="dropDown('dd2')"
onmouseout="closeddtime()">Content</a>
<div id="dd2"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
About Us
Coffee
Shop
Class
</div>
<a href="05_js_fw/index.html"
onmouseover="dropDown('dd3')"
onmouseout="closeddtime()">JS Framework</a>
<div id="dd3"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
Video
Who
What
</div>
Labs
</div>
</div>
The issue is with your DOM structure. In your code, you have to give separate left offsets for each drop-down to display it properly under the parent. But in case you are changing the navigation later, you have to adjust the css also to maintain alignment.
So i feel it is better to restructure your code. May be you can refer the below navigation. It is a simple css navigation with out any js.
ul, li{
margin: 0;
padding: 0;
list-style: none;
}
li{
position: relative;
display: inline;
margin: 0 20px;
}
li ul{
position: absolute;
width: 150px;
left: 0;
top: 100%;
display: none;
}
li:hover ul{
display: block;
}
li ul li{
display: block;
margin: 10px 0;
}
<div id="nav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div id="navLink">
<ul>
<li>Menu</li>
<li>Menu
<ul>
<li>Sub menu</li>
<li>Sub menu
</li>
<li>Sub menu</li>
<li>Menu</li>
</ul>
</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ul>
</div>
</div>