I created a mobile menu and for some reason whenever you expand the menu, the list items shift the right a bit and the border-bottom does not cover the entire width of the expanded menu.
To see the mobile part of the menu, shrink the screen down some. Once you click the menu icon, you will see that the list doesn't just go straight down, it looks to move to the right. Then the border issue is very easy to see.
See snippet to view the issue.
$('span.nav-btn').click(function () {
$('ul.nav_list').slideToggle(500);
})
$(window).resize(function (){
if ( $(window).width() > 600 ) {
$('ul.nav_list').removeAttr('style');
}
});
body {
padding: 0;
margin: 0;
font-family:
}
.header {
margin: 0;
background-color: #333;
height: 80px;
}
.header_wrap {
margin: 0 15%;
}
.logo {
color: #FFF;
font-size: 1.2em;
padding-top: 25px;
position: absolute;
}
.nav_list {
text-decoration: none;
background-color: #333;
color: #FFF;
margin: 0;
list-style: none;
text-align: right;
}
.nav_list > li {
display: inline-block;
padding: 25px 15px;
}
.nav_list > li > a {
text-decoration: none;
font-size: 1.2em;
color: #FFF;
}
#media screen and (max-width:640px) {
body {
background-color: blue;
}
.header_wrap {
margin: 0 5%;
}
.nav_list {
text-align: center;
display: none;
margin-top: 60px;
}
.nav_list > li {
display: block;
border-bottom: 1px solid #FFF;
}
.nav-btn {
display: block;
background-color: #333;
color: #FFF;
font-size: 1.5em;
text-align: right;
cursor: pointer;
padding-top: 20px;
}
.nav-btn:before {
background-image: url('http://realtorcatch.com/icons/mobile_menu_bttn.png');
background-size: 28px 28px;
background-repeat: no-repeat;
width: 28px;
height: 28px;
content:"";
display: block;
float: right;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<header class="header">
<div class="header_wrap">
<div class="logo">Garbrandt Construction</div>
<nav>
<span class="nav-btn"></span>
<ul class="nav_list">
<li>Services</li>
<li>About us</li>
<li>Pricing</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
Try adding the last line to your nav_list (padding-left:0 is needed):
.nav_list {
text-align: center;
display: none;
margin-top: 60px;
padding-left:0;
}
JS Fiddle
You should add a padding of 0 to the ul element. Padding: 0 or padding-left: 0 should do it.
.nav_list {
padding: 0;
}
Lists automatically have padding to the left;
Related
After changing some styles, the hamburger icon for mobile phones does not display anymore, how can I bring it back? also what would be the best way to add a little bit more white space above and under the menu but keep the position the same?
HTML:
<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
<div class="container">
<div class="logo">my<strong>Nav</strong></div>
<label class="navBars" for="xBxHack">
<i class="fa fa-bars"></i>
</label>
<ul id="menu" class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</nav>
CSS:
.mainNav {
background: #fff;
color: #fff;
max-height: 70px;
position: relative;
top:35%;
}
.mainNav a {
text-decoration: none;
}
.mainNav .logo {
display: inline-block;
color: #fff;
font-size: 1.7em;
height: 40px;
line-height: 1.55em;
letter-spacing: -2px;
text-transform: uppercase;
padding: 0 10px;
z-index: 0;
/*POSITION*/
position: relative;
}
.mainNav .logo:hover:before {
background: #292938;
}
.mainNav .logo:before {
content: "";
background: #3C91E6;
z-index: -1;
/*POSITION*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mainNav .logo a {
color: #efefef;
}
.mainNav .menu {
font-family: 'Montserrat', sans-serif;
text-transform:uppercase;
letter-spacing:5px;
background: #fff;
font-size:10px;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
border-top: 1px solid #fff;
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
/*POSITION*/
position: absolute;
top: 60px;
right: 0;
left: 0;
}
.mainNav .menu a {
color: #292938;
border-bottom: 1px solid #d9d9d9;
font-weight: bold;
display: block;
padding: 15px;
}
.mainNav .navBars {
display: inline-block;
font-size: 1.7em;
line-height: 1.5em;
float: right;
/*USER SELECTION*/
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
#xBxHack {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
#xBxHack:checked ~ nav .menu {
display: block;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 10px;
}
#media screen and (min-width: 600px) {
.mainNav {
overflow: hidden;
}
.mainNav .navBars {
display: none;
}
.mainNav .container {
padding-top: 0;
padding-bottom: 0;
}
.mainNav .logo {
margin: 10px 0;
}
.mainNav .menu {
display: block;
box-shadow: none;
border: none;
float: right;
/*POSITION*/
position: static;
}
.mainNav .menu li {
display: inline-block;
}
.mainNav .menu a {
border: none;
padding: 20px 10px;
}
}
JS:
$(document).ready(function() {
"use strict";
var myNav = {
init: function() {
this.cacheDOM();
this.browserWidth();
this.bindEvents();
},
cacheDOM: function() {
this.navBars = $(".navBars");
this.xBxHack = $("#xBxHack");
this.navMenu = $("#menu");
},
browserWidth: function() {
$(window).resize(this.bindEvents.bind(this));
},
bindEvents: function() {
var width = window.innerWidth;
if (width < 600) {
this.navBars.click(this.animate.bind(this));
this.navMenu.hide();
this.xBxHack[0].checked = false;
} else {
this.resetNav();
}
},
animate: function(e) {
var checkbox = this.xBxHack[0];
!checkbox.checked ?
this.navMenu.slideDown() :
this.navMenu.slideUp();
},
resetNav: function() {
this.navMenu.show();
}
};
myNav.init();
});
In this jsfiddle you can see that the icon does not appear when the screen is small: https://jsfiddle.net/quehf3x9/
Firstly make sure that you're loading the Font Awesome library. That wasn't being loaded in the JS Fiddle example. So I included a link to a CDN.
Secondly, add a width, height and background color to the CSS for the navbars:
.mainNav .navBars {
width: 30px;
height: 30px;
color: #111;
}
See my updated JS Fiddle for a working example.
You have two problems with your fiddle above. The first is that you did not include the font awesome library. The code does not know what to do with the fa fa-bars classes. To include an external library in jsfiddle:
Find a CDN where the file is hosted
Copy the path to the file
Paste it in the left sidebar in the External Resources section.
Select the + icon to add the resource to the fiddle.
Once the file is loaded, you can see from the developer tools (open the tools by selecting F12) that the class is applied but the icon color is white. You'll want to add some CSS to color the icon such as:
label i {
color: #333;
}
I've made these two changes and updated your fiddle here.
There are two things-
First one you are missing to include Font Awesome library
Secondly the color of icon is white. So you won't be able to see it even if you include the library, changing the color will do the trick <i class="fa fa-bars" style="color:black;"></i>
.mainNav {
background: #fff;
color: #fff;
max-height: 70px;
position: relative;
top:35%;
}
.mainNav a {
text-decoration: none;
}
.mainNav .logo {
display: inline-block;
color: #fff;
font-size: 1.7em;
height: 40px;
line-height: 1.55em;
letter-spacing: -2px;
text-transform: uppercase;
padding: 0 10px;
z-index: 0;
/*POSITION*/
position: relative;
}
.mainNav .logo:hover:before {
background: #292938;
}
.mainNav .logo:before {
content: "";
background: #3C91E6;
z-index: -1;
/*POSITION*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mainNav .logo a {
color: #efefef;
}
.mainNav .menu {
font-family: 'Montserrat', sans-serif;
text-transform:uppercase;
letter-spacing:5px;
background: #fff;
font-size:10px;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
border-top: 1px solid #fff;
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
/*POSITION*/
position: absolute;
top: 60px;
right: 0;
left: 0;
}
.mainNav .menu a {
color: #292938;
border-bottom: 1px solid #d9d9d9;
font-weight: bold;
display: block;
padding: 15px;
}
.mainNav .navBars {
display: inline-block;
font-size: 1.7em;
line-height: 1.5em;
float: right;
/*USER SELECTION*/
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
#xBxHack {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
#xBxHack:checked ~ nav .menu {
display: block;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 10px;
}
#media screen and (min-width: 600px) {
.mainNav {
overflow: hidden;
}
.mainNav .navBars {
display: none;
}
.mainNav .container {
padding-top: 0;
padding-bottom: 0;
}
.mainNav .logo {
margin: 10px 0;
}
.mainNav .menu {
display: block;
box-shadow: none;
border: none;
float: right;
/*POSITION*/
position: static;
}
.mainNav .menu li {
display: inline-block;
}
.mainNav .menu a {
border: none;
padding: 20px 10px;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
<div class="container">
<div class="logo">my<strong>Nav</strong></div>
<label class="navBars" for="xBxHack">
<i class="fa fa-bars" style="color:black;"></i>
</label>
<ul id="menu" class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</nav>
I'm working with this code:
$('.tab1-c').show();
$('.one').click(function(){
"use strict";
$('.tab1-c').show();
$('.tab2-c').hide();
$('.tab3-c').hide();
$('.tab4-c').hide();
});
$('.two').click(function(){
"use strict";
$('.tab1-c').hide();
$('.tab2-c').show();
$('.tab3-c').hide();
$('.tab4-c').hide();
});
$('.three').click(function(){
"use strict";
$('.tab1-c').hide();
$('.tab2-c').hide();
$('.tab3-c').show();
$('.tab4-c').hide();
});
$('.four').click(function(){
"use strict";
$('.tab1-c').hide();
$('.tab2-c').hide();
$('.tab3-c').hide();
$('.tab4-c').show();
});
.tab-nav-wrapper {
max-width: auto;
margin: 0 auto;
font-family: Open sans;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}
.tab-content-wrapper {
background-color:#fff;
width: auto;
min-height: auto;
padding: 15px 35px 5px;
margin: 0 auto;
text-align:justify;
}
.tab1-c , .tab2-c, .tab3-c, .tab4-c{ display:none
}
.tab-nav-wrapper ul li {
text-align: center;
display: inline-block;
width: 25%;
margin: 0;
text-decoration: none;
color: #000;
}
.tab-nav-wrapper a {
display: inline-block;
width: 25%;
padding: .75rem ;
margin: 0;
text-decoration: none;
color: #000;
}
.fonts-content {
font-family: droid serif;
font-size: 15px;
line-height: 20px;
color: #000000 !important;
text-indent: 50px;
}
.two {
}
.two:hover ~ hr {
margin-left: 24.5%;
background: #d48344;
}
.three {
}
.three:hover ~ hr {
margin-left: 49%;
background: #706a87;
}
.four {
}
.four:hover ~ hr {
margin-left: 74%;
background: #47435f;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: #d4bba7;
border: none;
transition: .3s ease-in-out;
}
h4 {
font-size: 30px;
font-family: Glegoo;
font-weight: bold;
margin-bottom: 15px;
margin-top: 20px;
line-height: 35px;
font-color: #000 !important;
text-align: center;
}
<div class="tab-nav-wrapper">
<ul>
<li class="one">Story #1</li><!--
--><li class="two">Story #2</li><!--
--><li class="three">Story #3</li><!--
--><li class="four">Story #4</li>
<hr>
</ul>
</div>
I would like for the element below each category to remain active when I hover over the other categories. I don't want it to jump back to its original position when clicking a different category. I want it to remain depending on which category I click.
Help please?
This is possible by using a little extra CSS and jQuery (I added #oneActive, #twoActive... ). Additionally, I cleaned up your jQuery a bit and rewrote most of it to get active to work.
$('.tab1-c').show();
mapping = {
"one":"tab1-c",
"two":"tab2-c",
"three":"tab3-c",
"four":"tab4-c"
};
$('.one, .two, .three, .four').click(function(){
$('.' + mapping[$(this).attr("class")])
.show()
.siblings()
.hide();
$(this)
.attr('id', $(this).attr("class") + "Active")
.siblings()
.attr("id","");
});
.tab-nav-wrapper {
max-width: auto;
margin: 0 auto;
font-family: Open sans;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}
.tab-content-wrapper {
background-color:#fff;
width: auto;
min-height: auto;
padding: 15px 35px 5px;
margin: 0 auto;
text-align:justify;
}
.tab1-c , .tab2-c, .tab3-c, .tab4-c{ display:none
}
.tab-nav-wrapper ul li {
text-align: center;
display: inline-block;
width: 25%;
margin: 0;
text-decoration: none;
color: #000;
}
.tab-nav-wrapper a {
display: inline-block;
width: 25%;
padding: .75rem ;
margin: 0;
text-decoration: none;
color: #000;
}
.fonts-content {
font-family: droid serif;
font-size: 15px;
line-height: 20px;
color: #000000 !important;
text-indent: 50px;
}
.two {
}
.two:hover ~ hr, #twoActive ~ hr {
margin-left: 24.5%;
background: #d48344;
}
.three {
}
.three:hover ~ hr, #threeActive ~ hr {
margin-left: 49%;
background: #706a87;
}
.four {
}
.four:hover ~ hr, #fourActive ~ hr {
margin-left: 74%;
background: #47435f;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: #d4bba7;
border: none;
transition: .3s ease-in-out;
}
h4 {
font-size: 30px;
font-family: Glegoo;
font-weight: bold;
margin-bottom: 15px;
margin-top: 20px;
line-height: 35px;
font-color: #000 !important;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-nav-wrapper">
<ul>
<li class="one">Story #1</li><!--
--><li class="two">Story #2</li><!--
--><li class="three">Story #3</li><!--
--><li class="four">Story #4</li>
<hr>
</ul>
</div>
<div>
<div class="tab1-c">test1</div>
<div class="tab2-c">test2</div>
<div class="tab3-c">test3</div>
<div class="tab4-c">test4</div>
</div>
I have a nav menu which has dropdown lists, and I have two problems atm:
I have the menu that when you click on a parent li, it will show its submenu, and when you click on another parent li or elsewhere in the page, it will hide.
On the first li.parent, i have a login form. The code I have won't let me click on the form to enter the login details. It will hide if I click on it.
How can I fill in the login form or click on it without it being hidden? But when I click elsewhere on the page it will close?
And
2) I want to have the li.parent to change its background color when I open one of its submenu. And return to his normal background color when closing the submenu.
//HEADER NAV-BAR SCRIPTS:
//Show Submenus when clicking on Parent / Hide Submenus when clicking other parent/elsewhere
function hide_sub_navs() {
$('.parent ul').hide().removeClass("shown");
}
$(function() {
hide_sub_navs();
$(".parent").click(function(event) {
event.stopPropagation();
var clicked = this;
var sub_menu = $(clicked).find("ul");
if (sub_menu.hasClass("shown")) {
sub_menu.hide().removeClass("shown");
} else {
sub_menu.show().addClass("shown");
$(".parent").each(function() {
var next_li = this;
if (next_li != clicked) {
$(next_li).find("ul").hide().removeClass("shown");
}
});
}
});
$(window).click(hide_sub_navs);
});
/** NAV MENU **/
div#nav-bar {
float: right;
display: inline-block;
height: 34px;
width: 40%;
clear: right;
padding: 0px 20px;
background-color: #FFF;
overflow: hidden;
}
/** Main Menu **/
div#nav-bar ul {
position: absolute;
right: 0px;
top: 0;
bottom: 0;
padding: 0px auto;
margin-top: 7px;
margin-bottom: 0;
margin-right: 10px;
margin-left: auto;
text-align: center;
width: auto;
height: 25px;
list-style-type: none;
font-family: Roboto, sans-serif;
background-color: #FFF;
display: block;
}
/** Titles **/
div#nav-bar ul li.title, li.parent {
display: inline-block;
height: 28px;
width: auto;
line-height: 28px;
padding: 0px 5px;
margin: 0px 5px;
position: relative;
border-radius: 3px;
font-weight: 800;
color: #005D96;
font-size: 14px;
}
/*Change Main Menu li background when hovering*/
div#nav-bar ul li:hover {
background-color: rgba(0, 184, 227, 0.1);
}
div#nav-bar ul li div#register li:hover {
background-color: inherit;
}
div#nav-bar ul#mainmenu li a#home {
display: inline-block;
text-decoration: none;
color: inherit;
width: auto;
height: 28px;
margin: 0px 5px;
padding: 0px 5px;
font-weight: 800;
color: #005D96;
font-size: 14px;
line-height: 28px;
position: relative;
border-radius: 3px;
}
/** Submenus **/
div#nav-bar ul ul {
height: 0 auto;
width: 0 auto;
position: absolute;
z-index: 1000;
background-color: #004469;
margin-top: 28px;
margin-right: 0px;
margin-left: 0px;
padding: 0px 10px;
border-radius: 3px;
display: none;
}
div#nav-bar ul ul li.child-element {
background-color: transparent;
font-weight: lighter;
font-size: 12.5px;
color: #FFF;
display: inline-block;
float: left;
height: 25px;
width: auto;
text-align: left;
line-height: 30px;
margin-top: 5px;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
padding: 0px 10px;
border-radius: 3px;
}
div#nav-bar ul ul li a {
display: inline-block;
text-decoration: none;
color: inherit;
height: 27px;
font-weight: lighter;
color: #FFF;
font-size: 12.5px;
border-radius: 3px;
}
/** Submenu 1 - Account **/
div#nav-bar ul ul#submenu1 {
width: 190px;
height: 240px;
}
/*SUBMENU 1 - LOGIN FORM*/
form {
border: none;
font-weight: lighter;
}
form p {
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
font-size: 0.9em;
text-align: center;
line-height: 20px;
height: 15px;
float: center;
margin-top: 10px;
}
form label b {
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
font-size: 0.8em;
line-height: 20px;
height: 15px;
float: left;
}
input[type=text], input[type=password] {
width: 100%;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: rgba(0, 208, 244, 1);
color: white;
font-size: 0.8em;
padding: 5px 5px;
margin-top: 10px;
margin-bottom: 0px;
border: none;
cursor: pointer;
width: 30%;
float: right;
}
div#rememberme {
font-size: 0.8em;
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
float: left;
padding: 0 10px;
margin: 8px 0;
}
div#forgotpsw p {
height: 20px;
width: auto;
position: relative;
top: -10px;
float: right;
font-family: Roboto, sans-serif;
font-size: 0.8em;
font-weight: lighter;
color: #FFF;
line-height: 15px;
}
div#forgotpsw p a.forgot {
display: inline-block;
height: auto;
text-decoration: underline;
width: auto;
font-family: Roboto, sans-serif;
font-size: 1em;
font-weight: lighter;
padding: 0px 2px;
}
/*Register*/
div#register {
display: inline-block;
margin-top: -10px;
width: 210px;
height: 50px;
position: relative;
left: -10px;
border-radius: 3px;
background-color: #00598A;
font-weight: lighter;
}
div#register li p.register {
font-size: 0.85em;
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
margin: 0px 10px;;
height: 50px;
line-height: 25px;
text-align: center;
}
div#register li p a.register {
display: inline-block;
margin: 0;
padding: 0;
text-decoration: underline;
text-decoration-color: #FFF;
font-family: Roboto, sans-serif;
font-size: 1em;
}
.container {
padding: 0;
padding-bottom: 10px;
height: 170px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
}
/** Submenu 2 - Manage Bookings **/
div#nav-bar ul ul#submenu2 {
width: 170px;
height: 130px;
}
/** Submenu 3 - Support **/
div#nav-bar ul ul#submenu3 {
width: 140px;
height: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="nav-bar">
<ul id="mainmenu">
<li class="title"><a href="index.html" id="home" >Home</a></li>
<li class="parent">Account
<ul id="submenu1">
<!--Login Form-->
<form>
<div class="container">
<p>Log-in to Access your Account</p>
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<div id="rememberme">
<input type="checkbox" checked="checked ">Remember me
</div>
<!--Forgot Password-->
<div id="forgotpsw">
<li class="forgot">
<p>Forgot <a class="forgot" href="forgot.html">Password</a> ?</p>
</li>
</div>
</div>
</form>
<!--Register-->
<div id="register">
<li>
<p class="register">Don't have an account yet? Click
<a class="register" href="register.html">here</a> to Register.</p>
</li>
</div>
</ul>
</li>
<li class="parent">Manage Bookings
<ul id="submenu2">
<li class="child-element">Itineraries</li>
<li class="child-element">Manage my Flights</li>
<li class="child-element">Manage Hotel Bookings</li>
<li class="child-element">Travel Documents</li>
</ul>
</li>
<li class="parent">Support
<ul id="submenu3">
<li class="child-element">Customer Service</li>
<li class="child-element">Feedback</li>
</ul>
</li>
</ul>
</div>
</body>
Okay, I came up with this code, will it work well?? It worked for me on Boostrap Studio.
changed html li.parent elements to:
<li id="account" class="parent">Account
<li id="bookings" class="parent">
<li id="support" class="parent">Support
I added an id to each parent li. Also, each of its submenu has an id (#submenu1, #submenu2, #submenu3).
This is the script i used to keep the submenu open while I'm clicking anywhere inside it, and closing it if i click a different parent or anywhere else in html file.
$('html, .parent').click(function() {
$('#submenu1').hide();
});
$('#mainmenu, #submenu1').click(function(event) {
event.stopPropagation();
});
$('#account').click(function(event) {
$('#submenu1').toggle();
});
$('html, .parent').click(function() {
$('#submenu2').hide();
});
$('#mainmenu, #submenu2').click(function(event) {
event.stopPropagation();
});
$('#bookings').click(function(event) {
$('#submenu2').toggle();
});
$('html, .parent').click(function() {
$('#submenu3').hide();
});
$('#mainmenu, #submenu3').click(function(event) {
event.stopPropagation();
});
$('#support').click(function(event) {
$('#submenu3').toggle();
});
When you hover over a nav li item on my website, it should slide down the nav ul ul item, but when it slides down for some reason it is skinny, then widens after. Please look at my JSFiddle and help me out :D
JSFiddle Demo
HTML:
<body>
<header>
<nav>
<ul>
<li>Home
<ul>
<li>About Me</li>
</ul>
</li>
<li>Purposeful Living
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
<li>Academic Excellence
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
<li>Ethical Responsibility
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
</ul>
</nav>
</header>
<div id="headershow">Toggle Nav Bar</div>
<div id="mainnamesection">
<h1 id="mainname">
Title
</h1>
<div id="flyingsection">
</div>
<h1 id="mainname1">
<span id="smallname">Subtitle</span>
</h1>
</div>
</body>
Javascript/Jquery:
$(document).ready(function() {
$("#smallname").click(function() {
$("html, body").animate({scrollTop: "0px"});
});
$("#headershow").click(function() {
$("header").slideToggle();
});
$(".grades td a").mouseover(function() {
$(this).animate({backgroundColor: "white", color: "black"}, 200);
$(this).mouseleave(function() {
$(this).animate({backgroundColor: "transparent", color: "white"}, 200);
});
});
$('nav li').hover(
function () {
$('ul', this).slideDown();
},
function () {
$('ul', this).stop().slideUp();
}
);
});
CSS:
` #import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
background-image: url(file:///Users/jakesager/Desktop/Websites/Jake%20Sager/img/starrynight.jpg);
background-size: 110%;
background-position: center -100px;
background-attachment: fixed;
margin:0;
padding:0;
}
header {
width: 100%;
margin:auto;
background: rgba(255,255,255,0.7);
height: 60px;
z-index: 20;
display: none;
}
.inline {
display: inline-block;
}
#flyingbird {
height: 60px;
width: 90px;
left: 100px;
position: relative;
top: -30px;
}
#bird {
height: 60px;
width: 90px;
display: inline-block;
position: relative;
top: 15px;
z-index: 1;
}
#flyingsection {
width: 700px;
margin:auto;
margin-top: 0px;
margin-bottom: 0px;
}
nav {
height: 60px;
margin-top: 0px;
text-align: center;
z-index: 20;
}
nav ul ul {
display:none;
}
#headershow {
background-color: rgba(255,255,255,0.7);
position: static;
left: 0;
top: 0;
width: 125px;
text-align:center;
border-bottom-right-radius: 10px;
padding: 5px;
height: 20px;
cursor: pointer;
font-family: open sans;
}
nav ul {
list-style:none;
display: inline-table;
position:relative;
padding: 0;
font-family: open sans;
display: inline-block;
}
nav ul li {
float: left;
margin-top: -16px;
border-right: 2px solid black;
text-align:center;
height: 60px;
padding-left: 25px;
padding-right: 25px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
color:black;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 5px;
padding-right: 5px;
position: relative;
top: 18px;
}
nav ul li:first-child {
border-left: 2px solid black;
}
nav ul li:last-child {
border-right: 2px solid black;
}
nav ul li:hover {
background: rgba(255,255,255,0.6)
}
nav ul ul {
position: absolute;
top: 100%;
z-index: 20;
}
nav ul ul li {
float:none;
background-color: rgba(255,255,255,0.82);
width: 100%;
margin-top: 0;
margin-left: -27px;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 1px solid black;
}
nav ul ul li:last-child {
border-bottom: 2px solid black;
}
nav ul ul li:hover {
background-color: rgba(255,255,255,0.9);
}
#mainnamesection {
width: 1050px;
margin:auto;
}
#mainname {
font-size: 180px;
font-family: open sans;
text-align:center;
margin-top: 20px;
color: white;
}
#mainname1 {
font-size: 180px;
font-family: open sans;
text-align:center;
color: white;
margin-top: -100px;
}
#smallname {
font-size: 50px;
font-family: open sans;
color: #47BCEA;
}
nav ul ul {
margin-left: 0;
}
.maincontent {
width: 100%;
margin-top: 30px;
padding-top: 7px;
padding-bottom: 10px;
color: white;
}
.maincontent p {
font-family: open sans;
margin-left: 20px;
font-size: 18px;
}
.maincontent h1 {
font-family: open sans;
margin-left: 20px;
}
.grades {
margin-left: 20px;
background-color: rgba(000,000,000, 0.7);
font-family: open sans;
font-size: 23px;
}
.grades td {
padding: 10px;
border-right: 2px solid white;
}
.grades td:last-child {
border: none;
}
.grades td a {
width: 100%;
color: white;
text-decoration: none;
padding: 5px;
}
.wrapper {
width: 941px;
margin:auto;
}
.maintitle {
font-family: Open sans;
margin-left: 20px;
}
.mainparagraph {
font-family: Open sans;
margin-left: 20px;
}
During the animation overflow is set to hidden. When animation completes the inline overflow style is removed.
You have negative margin set on sub menu <li> so while the animation is in progress the part that is outside the parent is not visible.
Suggest you remove the negative margin and set the <ul> to left:0
http://i.stack.imgur.com/VPqxq.png
< ITEM2 ITEM3 ITEM4 ITEM5 ITEM6 >
This is what i am trying to achieve, by clicking the right arrow it should load the remaining menu item and same as left arrow but to left.
I am using asp.net! but can i achieve this by css and J Query or java script? Can anyone point out website that uses this ?
Here is a JS Fiddle that should help with what you are trying to build.
A navigation menu that animates left or right.
http://jsfiddle.net/bYY39/
HTML
<div class='navigation'>
<button type='button' class="left-arrow"><p><</p></button>
<ul>
<li class='item1'>menu item1</li>
<li>menu item2</li>
<li>menu item3</li>
<li>menu item4</li>
<li>menu item5</li>
<li>menu item6</li>
</ul>
<button type='button' class='right-arrow'><p>></p></button>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
button {
border:none;
cursor: pointer;
}
.navigation {
width: 1000px;
}
.left-arrow {
background: #3d69b9;
float: left;
height: 60px;
text-align: center;
width: 60px;
}
.left-arrow:hover {
background: #69c;
}
.left-arrow p {
color: #fff;
font-size: 18px;
}
.right-arrow {
background: #3d69b9;
border-left: 1px solid #69c;
float: left;
height: 60px;
text-align: center;
width: 60px;
}
.right-arrow:hover {
background: #69c;
}
.right-arrow p {
color: #fff;
font-size: 18px;
}
ul {
float:left;
font-size: 0;
overflow: hidden;
width: 815px;
white-space: nowrap;
}
li {
border-left: 1px solid #69c;
color: #fff;
display: inline-block;
font-size: 16px;
height: 60px;
list-style: none;
text-align: center;
width: 162px;
}
li a {
background: #3d69b9;
color: #fff;
display: block;
height: 100%;
padding-top: 18px;
text-decoration: none;
width: 100%
}
li a:hover {
background: #69c;
}
JS
$('.left-arrow').on({click: function() {
$('.item1').animate({marginLeft:'0px'}, 500);
}
});
$('.right-arrow').on({click: function() {
$('.item1').animate({marginLeft:'-163px'}, 500);
}
});