show/ hide ul for mobile device in responsive website

show/ hide ul for mobile device in responsive website - javascript

i am working on a website and for mobile device i want it to show and hide navigation when i click on image
<div class="mobile_header">
<div class="tab">
<a id="tab" href="#">
<img src="images/tab_btn.jpg" height="70" alt="logo" /></a></div>
<div style="clear:both;"></div>
<ul>
<li>About</li>
<li>Services</li>
<li >contact</li>
</ul>
</div></div>
and this my css
.tab{ float:right; width:40px; height:40px; padding:20px;}
.tab img{ width:40px; height:40px;}
.mobile_header
{
color: #fff;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
background: #000;
font-family: 'oswaldbook';
border: 1px solid #323232;
z-index: 111;
text-align: left;
}
.mobile_header ul
{
margin:0px;
display:none;
padding: 0;
position: relative;
width: 100%;
}
.mobile_header ul li
{
display: block;
position: relative;
text-align:center;
width:100%;
margin:0px;
padding:0px;
padding-top:10px;
}
and here is js
$("#tab").click(
function () { $(".mobile_header ul").fadeIn(700); });
});
what I want is to toggle the .mobile_header ul but its not working with
$(function () {
$(".tab").click(
function () { $(".mobile_header ul").slideToggle(500); },
function () { $(".mobile_header ul").hide(); }
);
});

You have two functions in the .click() method when you only need one:
$(function() {
$(".tab").click(
function() {
$(".mobile_header ul").slideToggle(500);
}
);
});
DEMO EXAMPLE
Docs: http://api.jquery.com/click/

Related

How to apply css rules for hidden submenu?

How to apply the css rules for hidden submenu? I've tried to add some JS, but there is a problem as it doesn't work.
Below there are the samle of the code I work about. Idea is that on the click to anchor text 'A' it should be shown a submenu. Thanks in advance for any advices.
var sub=document.querySelector("#subBox"),
subToggle=document.querySelector("#submenu");
if (subToggle){
subToggle.addEventListener("click",
function(e){
if(sub.className=="open"){
sub.className="";
}else{
sub.className="open";
}
e.preventDefault();
}, false );
}
body {
background: #fff;
font-family: 'Verdana', sans;
color: #fff;
text-align: center;
}
#media only screen and (max-width:768px){
body{font-size:16px;}
}
#media only screen and (min-width:769px){
body{font-size:32px;}
}
ul li{list-style-type: none;}
li{display:inline;}
a, li a{
text-decoration: none;
outline: none;
color:#fff;
}
#menu{
width:100vw;
height:100vh;
display:block;
position:absolute;
top:0;
left:0;
background:#eacebe;
overflow:hidden;
}
#subBox{
max-width:0;
max-height:0;
overflow:hidden;
}
#subBox .open{
width:200px;
height:200px;
display:block;
position:relative;
background:gray;
color:#fff;
}
.skip{
clip: rect(0 0 0 0);
margin: -1px;
overflow:hidden;
display: none;
position: absolute;
top: -1px;
left: -1px;
z-index: -1;
}
<body>
<h1 class='skip'>Exploration of css rules of the hidden submenu</h1>
<div id='nav'>
<nav nav ul>
<h2 class='skip'>Menu with one submenu</h2>
<div id='menu'>
<ul>
<li id='submenu'>
<a href='/a'>A <!--A-->
<div id="subBox">
<ul>
<li><a href='/aOne'>1</a><li> <!--A/1-->
<li><a href='/aTwo'>2</a></li> <!--A/2-->
<li><a href='/aThree'>3</a></li> <!--A/3-->
</ul>
</div>
</a>
</li>
<li><a href='/b'>B</a><li> <!--B-->
<li><a href='/c'>C</a></li> <!--C-->
</ul>
</div>
</nav>
</div>
</body>

You were close. You're applying the .open class to #subBox, so change your selector to #subBox.open.
var sub=document.querySelector("#subBox"),
subToggle=document.querySelector("#submenu");
if (subToggle){
subToggle.addEventListener("click",
function(e){
if(sub.className=="open"){
sub.className="";
}else{
sub.className="open";
}
e.preventDefault();
}, false );
}
body {
background: #fff;
font-family: 'Verdana', sans;
color: #fff;
text-align: center;
}
#media only screen and (max-width:768px) {
body {
font-size: 16px;
}
}
#media only screen and (min-width:769px) {
body {
font-size: 32px;
}
}
ul li {
list-style-type: none;
}
li {
display: inline;
}
a,
li a {
text-decoration: none;
outline: none;
color: #fff;
}
#menu {
width: 100vw;
height: 100vh;
display: block;
position: absolute;
top: 0;
left: 0;
background: #eacebe;
overflow: hidden;
}
#subBox {
max-width: 0;
max-height: 0;
overflow: hidden;
}
#subBox.open {
width: 200px;
height: 200px;
display: block;
position: relative;
background: gray;
color: #fff;
overflow: visible;
max-height: 100%;
min-height: 100%;
}
.skip {
clip: rect(0 0 0 0);
margin: -1px;
overflow: hidden;
display: none;
position: absolute;
top: -1px;
left: -1px;
z-index: -1;
}
<body>
<h1 class='skip'>Exploration of css rules of the hidden submenu</h1>
<div id='nav'>
<nav nav ul>
<h2 class='skip'>Menu with one submenu</h2>
<div id='menu'>
<ul>
<li id='submenu'>
<a href='/a'>A <!--A-->
<div id="subBox">
<ul>
<li><a href='/aOne'>1</a>
<li>
<!--A/1-->
<li><a href='/aTwo'>2</a></li>
<!--A/2-->
<li><a href='/aThree'>3</a></li>
<!--A/3-->
</ul>
</div>
</a>
</li>
<li><a href='/b'>B</a>
<li>
<!--B-->
<li><a href='/c'>C</a></li>
<!--C-->
</ul>
</div>
</nav>
</div>
</body>

JQuery - Add/Remove class on vertical scroll has no effect

I am trying to add and remove a class based on vertical scroll (to the navbar) but there seems to be no effect.
I want the navbar to change background color on scroll and I cant understand why it has not effect.
I have tried adding just css using $(element).css but that doesnt seem to be making a difference either
Link: https://jsfiddle.net/r4Lxvqps/
HTML:
<!DOCTYPE html>
<title>A</title>
<body>
<div class="container">
<header class="header">
<nav class="nav">
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li id="logo">
Arshdeep
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div class="home">
<div class="container">
<section>
</section>
<aside>
<img src="assets/images/imac.png" alt=""/>
</aside>
</div>
</div>
<div class="about">
<div class="container">
</div>
</div>
<div class="portfolio">
<div class="container">
</div>
</div>
<div class="contact">
<div class="container">
</div>
</div>
</div>
</body>
CSS:
* {
padding: 0px;
margin:0 auto;
-webkit-transition: all .2s ease-in-out;
}
html, body {
height: 100%;
font-family: 'TitilliumWeb-Regular', 'sans-serif';
}
body {
min-height: 100% !important;
}
h1 {
padding: 0px;
margin:0px;
}
.container {
position:relative;
height: 100%;
}
nav {
padding: 5px 0px;
position:fixed;
width: 100%;
top:0;
z-index: 9999;
color:black;
}
nav > ul {
text-align: center;
padding: 5px 0px;
}
nav > ul > li {
display: inline-block;
vertical-align: middle;
margin:0 15px;
}
nav a {
text-decoration: none;
color:white;
display: block;
}
nav li a:not(#logo) {
padding: 10px 18px;
}
nav li:not(#logo) a {
opacity: .7;
}
nav li:not(#logo) a:hover {
opacity: 1;
}
#logo a {
font-size: 30px;
}
.scrolled {
background-color:white;
color:black !important;
}
/** Home Page **/
.home {
vertical-align: top;
background-color: #38A5DB;
color:black;
min-height: 100%;
position:relative;
}
.home > .container {
top: 85px;
padding: 50px 0px;
float:left;
width: 100%;
color:white;
}
.about, .contact, .portfolio {
min-height: 100%;
}
section {
float:left;
width: 48%;
position:relative;
text-align: center;
}
aside {
float:right;
width: 50%;
}
aside > img {
width: 80%;
}
/** About Me **/
Checks if offset is > 50 and then should add css (color:black)
JQuery:
$(document).ready(function() {
$(window).scroll(function() {
var scroll_offset = $(window).scrollTop;
if (scroll_offset > 50) {
$(".nav").css("color", "black");
}
});
});

var scroll_offset = $(window).scrollTop();
$.fn.scrollTop is a function. You forgot to invoke it.

Also can try this:
$(window).scroll(function() {
if ($(window).scrollTop() >= 50) {
$(".nav ul li a").css("color", "black");
} else {
$(".nav ul li a").css("color", "white");
}
});
JSFiddle

Invoke the scrollTop function (scrollTop())
Fix the selector: nav a instead of .nav
Add else statement to restore original color
jsFiddle demo
$(document).ready(function() {
$(window).scroll(function() {
var scroll_offset = $(window).scrollTop();
//alert(scroll_offset);
if (scroll_offset > 50) {
$("nav a").css("color", "black");
} else {
$("nav a").css("color", "white");
}
});
});
* {
padding: 0px;
margin: 0 auto;
-webkit-transition: all .2s ease-in-out;
}
html,
body {
height: 100%;
font-family: 'TitilliumWeb-Regular', 'sans-serif';
}
body {
min-height: 100% !important;
}
h1 {
padding: 0px;
margin: 0px;
}
.container {
position: relative;
height: 100%;
}
nav {
padding: 5px 0px;
position: fixed;
width: 100%;
top: 0;
z-index: 9999;
color: black;
}
nav > ul {
text-align: center;
padding: 5px 0px;
}
nav > ul > li {
display: inline-block;
vertical-align: middle;
margin: 0 15px;
}
nav a {
text-decoration: none;
color: white;
display: block;
}
nav li a:not(#logo) {
padding: 10px 18px;
}
nav li:not(#logo) a {
opacity: .7;
}
nav li:not(#logo) a:hover {
opacity: 1;
}
#logo a {
font-size: 30px;
}
.scrolled {
background-color: white;
color: black !important;
}
/** Home Page **/
.home {
vertical-align: top;
background-color: #38A5DB;
color: black;
min-height: 100%;
position: relative;
}
.home > .container {
top: 85px;
padding: 50px 0px;
float: left;
width: 100%;
color: white;
}
.about,
.contact,
.portfolio {
min-height: 100%;
}
section {
float: left;
width: 48%;
position: relative;
text-align: center;
}
aside {
float: right;
width: 50%;
}
aside > img {
width: 80%;
}
/** About Me **/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<header class="header">
<nav class="nav">
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li id="logo">
Arshdeep
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div class="home">
<div class="container">
<section>
</section>
<aside>
<img src="assets/images/imac.png" alt="" />
</aside>
</div>
</div>
<div class="about">
<div class="container">
</div>
</div>
<div class="portfolio">
<div class="container">
</div>
</div>
<div class="contact">
<div class="container">
</div>
</div>
</div>

Navigation bar jQuery not working

I'm a student learning some really basic HTML coding and I decided to use a simple JavaScript navigation bar so that the drop down menu has some animation speed.
The navigation bar was previously working but after adding my image slider it stopped working.
Thanks for the help!
// JavaScript NavBar
$( document ).ready(function() {
$('#navbar ul li ul').hide().removeClass('fallback');
$('#navbar ul li').mouseenter(function () {
$('#navbar ul', this).stop().slideDown(500);
});
$('#navbar ul li').mouseleave(function () {
$('#navbar ul', this).stop().slideUp(100);
});
});
* {
margin:0;
padding:0;
}
body{
background:url(../images/subtle_white_mini_waves.png) repeat;
font-family:Tahoma, Geneva, sans-serif;
color: white;
}
#navbar{
margin-left:-400px;
position:absolute;
left:50%;
}
#navbar a{
text-decoration:none;
}
.button{
background:url(../images/navbarbutton.png);
margin-top: 66px;
width: 170px;
}
.button:hover{
background:#e6e6e6;
}
.button a{
padding: 34px 0px;
}
#navbar ul{
text-align:center;
}
#navbar ul li{
float: left;
display: inline;
font-size:16px;
height:89px;
}
#navbar ul li:hover{
background:#E6E6E6;
}
#navbar ul li a{
display:block;
color: #444;
}
#navbar ul li ul{
position:absolute;
width: 170px;
background:#fff;
}
#navbar ul li ul li{
width: 170px;
}
#navbar ul li ul li a{
display:block;
padding: 15px 0px 15px 0px;
color: #444;
font-size: 14px;
}
#navbar ul li ul li:hover a{
background:#f7f7f7;
}
#navbar ul li ul.fallback{
display:none;
}
#navbar ul li:hover ul.fallback{
display:block;
}
.shadows{
position:absolute;
z-index:10;
}
#shadowtopleft{
margin-left:4.6875%;
margin-right:140px;
float:left;
}
#shadowtopright{
float:left;
}
#shadowbottomleft{
margin-top: 83px;
margin-left:4.6875%;
margin-right:140px;
float:left;
}
#shadowbottomright{
margin-top: 83px;
float:left;
}
.banner {
z-index:-1;
position: relative;
width: 100%;
overflow: auto;
padding: 0px;
margin: 0px;
}
.banner ui{
list-style:none;
padding: 0px;
margin: 0px;
}
.banner ul li {
display:block;
float:left;
padding: 0px;
margin: 0px;
min-height:500px;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beyond - Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="scripts/NavBar.js"></script>
<script src="scripts/unslider.min.js"></script>
</head>
<body>
<!--NavBar start-->
<div id="navbar">
<ul>
<li class="button">Programmes
<ul class="fallback">
<li>Problem De-esclation</li>
<li>Family Strengthening</li>
<li>Community Integration</li>
<li>Support Programmes</li>
</ul>
</li>
<li class="button">How You Can Help
<ul class="fallback">
<li>Donate</li>
<li>Volunteer</li>
<li>Sponsor</li>
<li>Partner</li>
<li>Join The Staff</li>
</ul>
</li>
<li>
<div id="logo">
<img src="images/logo.png" width="140" height="225" alt="Beyond - Logo">
</div>
</li>
<li class="button">About Beyond
<ul class="fallback">
<li>Our board</li>
<li>News and Views</li>
</ul>
</li>
<li class="button">Contact Us
<ul class="fallback">
<li>Facilities</li>
<li>Feedback</li>
</ul>
</li>
</ul>
</div>
<!--NavBar end-->
<!--Shadows start-->
<div class="shadows">
<div id="shadowtopleft">
<img src="images/shadowtopleft.png" width="520" height="66">
</div>
<div id="shadowtopright">
<img src="images/shadowtopright.png" width="520" height="66">
</div>
<div id="shadowbottomleft">
<img src="images/shadowbottomleft.png" width="520" height="13">
</div>
<div id="shadowbottomright">
<img src="images/shadowbottomright.png" width="520" height="13">
</div>
</div>
<!--Shadows end-->
<!--Unslider start-->
<div class="banner">
<ul>
<li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
<li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
<li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
</ul>
</div>
<script>
$( document ).ready(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
});
</script>
<!--Unslider end-->
</body>
</html>

Since you are a student, you might have not of heard of the z-index style property. The z-index property specifies the stack order of an element, especially if you are using position: absolute; a lot.
So your menu menu, #navbar, is there. It's just hidden under other elements, so you might want to add the z-index style to your code, like this:
#navbar {
margin-left: -400px;
position: absolute;
left: 50%;
z-index: 100;
}
I also thought that I'd mention that in your CSS code, you made a tiny error:
.banner ui{
list-style:none;
padding: 0px;
margin: 0px;
}
Should be:
.banner ul {
list-style:none;
padding: 0px;
margin: 0px;
}
I combined my answer and put it inside if the code snippet below.
// JavaScript NavBar
$(document).ready(function() {
$('#navbar ul li ul').hide().removeClass('fallback');
$('#navbar ul li').mouseenter(function() {
$('#navbar ul', this).stop().slideDown(500);
});
$('#navbar ul li').mouseleave(function() {
$('#navbar ul', this).stop().slideUp(100);
});
});
* {
margin: 0;
padding: 0;
}
body {
background: url(../images/subtle_white_mini_waves.png) repeat;
font-family: Tahoma, Geneva, sans-serif;
color: white;
}
#navbar {
margin-left: -400px;
position: absolute;
left: 50%;
z-index: 100;
}
#navbar a {
text-decoration: none;
}
.button {
background: url(../images/navbarbutton.png);
margin-top: 66px;
width: 170px;
}
.button:hover {
background: #e6e6e6;
}
.button a {
padding: 34px 0px;
}
#navbar ul {
text-align: center;
}
#navbar ul li {
float: left;
display: inline;
font-size: 16px;
height: 89px;
}
#navbar ul li:hover {
background: #E6E6E6;
}
#navbar ul li a {
display: block;
color: #444;
}
#navbar ul li ul {
position: absolute;
width: 170px;
background: #fff;
}
#navbar ul li ul li {
width: 170px;
}
#navbar ul li ul li a {
display: block;
padding: 15px 0px 15px 0px;
color: #444;
font-size: 14px;
}
#navbar ul li ul li:hover a {
background: #f7f7f7;
}
#navbar ul li ul.fallback {
display: none;
}
#navbar ul li:hover ul.fallback {
display: block;
}
.shadows {
position: absolute;
z-index: 10;
}
#shadowtopleft {
margin-left: 4.6875%;
margin-right: 140px;
float: left;
}
#shadowtopright {
float: left;
}
#shadowbottomleft {
margin-top: 83px;
margin-left: 4.6875%;
margin-right: 140px;
float: left;
}
#shadowbottomright {
margin-top: 83px;
float: left;
}
.banner {
z-index: -1;
position: relative;
width: 100%;
overflow: auto;
padding: 0px;
margin: 0px;
}
.banner ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.banner ul li {
display: block;
float: left;
padding: 0px;
margin: 0px;
min-height: 500px;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beyond - Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="scripts/NavBar.js"></script>
<script src="scripts/unslider.min.js"></script>
</head>
<body>
<!--NavBar start-->
<div id="navbar">
<ul>
<li class="button">Programmes
<ul class="fallback">
<li>Problem De-esclation
</li>
<li>Family Strengthening
</li>
<li>Community Integration
</li>
<li>Support Programmes
</li>
</ul>
</li>
<li class="button">How You Can Help
<ul class="fallback">
<li>Donate
</li>
<li>Volunteer
</li>
<li>Sponsor
</li>
<li>Partner
</li>
<li>Join The Staff
</li>
</ul>
</li>
<li>
<div id="logo">
<a href="index.html">
<img src="images/logo.png" width="140" height="225" alt="Beyond - Logo">
</a>
</div>
</li>
<li class="button">About Beyond
<ul class="fallback">
<li>Our board
</li>
<li>News and Views
</li>
</ul>
</li>
<li class="button">Contact Us
<ul class="fallback">
<li>Facilities
</li>
<li>Feedback
</li>
</ul>
</li>
</ul>
</div>
<!--NavBar end-->
<!--Shadows start-->
<div class="shadows">
<div id="shadowtopleft">
<img src="images/shadowtopleft.png" width="520" height="66">
</div>
<div id="shadowtopright">
<img src="images/shadowtopright.png" width="520" height="66">
</div>
<div id="shadowbottomleft">
<img src="images/shadowbottomleft.png" width="520" height="13">
</div>
<div id="shadowbottomright">
<img src="images/shadowbottomright.png" width="520" height="13">
</div>
</div>
<!--Shadows end-->
<!--Unslider start-->
<div class="banner">
<ul>
<li>
<img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
</li>
<li>
<img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
</li>
<li>
<img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
</li>
</ul>
</div>
<script>
$(document).ready(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
});
</script>
<!--Unslider end-->
</body>
</html>

How to toggle the contents of span when clicked?

I have a navigation bar with a drop down menu. I have a + in front of the drop down menu inside a span. I would like the the plus to toggle to - when the menu is dropped down and back to + when the menu is up(hidden). How can I do this?
my html looks like
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li class="shop"><span>+</span>Shop
<ul class="shopList">
<li>New Arrivals</li>
<li>Dresses</li>
<li>Jumpsuits</li>
</ul>
</li>
<li>Wholesale</li>
<li>Retailers</li>
<li>Contact</li>
</ul>
</nav>
I am currently using js to drop down my menu. Can I add to my current js to achieve this. My js looks like
$(document).ready(function() {
$('.shop').click(function() {
$('.shopList').slideToggle("fast");
});
});
here is my css
nav{
position:relative;
display:block;
width:70%;
margin:0;
padding:3px 15%;
border-top:1px solid #d0d0d0;
text-align:center;
font:15px 'OpenSans';
z-index: 999;
}
nav ul{
position:relative;
width:100%;
margin:0;
padding:0;
}
nav li{
display:inline-block;
margin:0 10px;
padding:0;
}
nav li ul li{
position:relative;
display:block;
width:150px;
margin:0;
padding:0;
}
.shopList{
position:absolute;
display:none;
width:100px;
margin:0 0 0 -50px;
padding:0;
}
nav a{
position:relative;
display:block;
width:auto;
margin:0;
padding:0;
color:#707070;
text-decoration:none;
}

One solution is to compare previous text with new:
$('.shop').click(function() {
$('.shopList').slideToggle("fast");
$("a span", this).text() == "+" ? $("a span", this).text("-") : $("a span", this).text("+");
});
nav {
position: relative;
display: block;
width: 70%;
margin: 0;
padding: 3px 15%;
border-top: 1px solid #d0d0d0;
text-align: center;
font: 15px'OpenSans';
z-index: 999;
}
nav ul {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
padding: 0;
}
nav li ul {
display: none;
}
nav li ul li {
position: relative;
display: block;
width: 150px;
margin: 0;
padding: 0;
}
.shopList {
position: absolute;
display: none;
width: 100px;
margin: 0 0 0 -50px;
padding: 0;
}
nav a {
position: relative;
display: block;
width: auto;
margin: 0;
padding: 0;
color: #707070;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li class="shop"><span>+</span>Shop
<ul class="shopList">
<li>New Arrivals
</li>
<li>Dresses
</li>
<li>Jumpsuits
</li>
</ul>
</li>
<li>Wholesale
</li>
<li>Retailers
</li>
<li>Contact
</li>
</ul>
</nav>

responsive sidebar menu and web page

I'm trying to create a html web page that has a responsive sidebar menu and main div at the center. but I'm having a trouble doing it.. I uploaded a image so that you will relate on what I'm trying to ask.
here's the link for the image..
http://i61.tinypic.com/2lca73q.png
please help me thank you.. so much.
What i have so far is:
CSS
*
{
padding:0;
margin:0;
font-family: helvetica;
}
html
{
overflow-y:scroll;
}
body
{
width:100%;
height:100%;
}
.main
{
width:100%;
height:100%;
}
.sidebar
{
float:left;
width:8%;
background:#111;
display: relative;
position:absolute;
height:100%;
max-height: 100%;
}
.space
{
margin-top:125%;
}
#add
{
position: relative;
width:55%;
margin-left:25%;
display: block;
color:#fff;
text-decoration:none;
padding:10px 10px 10px 0;
}
li
{
list-style: none;
text-decoration:none;
padding:3px;
}
#view
{
width:55%;
margin-left:23%;
display: block;
position: relative;
padding:10px 10px 10px 0;
}
li:hover
{
background:#333;
}
.view:hover
{
b ackground:#333;
}
#setting
{
width:76%;
margin-left:13%;
position: relative;
display: block;
padding:5px 5px 5px 0;
}
#logout
{
width:46%;
margin-left:28%;
display: block;
position:relative;
padding:10px 10px 10px 0;
}
h2
{
margin:auto;
position:absolute;
margin-left:40%;
font-weight:normal;
color: #666;
font-size:18px;
margin-top:2%;
display: block;
}
.main_box
{
display:inline-block;
background:#099;
height:300px;
width:300px;
}
HTML
<body>
<div class = "main">
<div class = "sidebar">
<ul>
<div class = "space"></div>
<li><img src = "images/add.png" id = "add"></a><p class = "txt_add"></p></li>
<li><img src = "images/view.png" id = "view"><p class = "txt_view"></p></li>
<li><img src = "images/setting.png" id = "setting"><p class = "txt_setting"> </p></li>
<li><img src = "images/logout.png" id = "logout"><p class = "txt_logout"></p> </li>
</ul>
</div>
<h2>ONLINE SPOT VERIFICATION</h2>
<div class = "main_box">
</div>
</div>

html, body {
height: 100%;
}
demo

I do not really know what your question is but I guess you want a full height div?
This is a way to do it in css3.
height: 100vh;
I also think you want to float your .main_box to the left so it will be next to your sidebar.

We Keep Coding

JavaScript is the programming language of the Web.

show/ hide ul for mobile device in responsive website - javascript

You have two functions in the .click() method when you only need one: $(function() { $(".tab").click( function() { $(".mobile_header ul").slideToggle(500); } ); }); DEMO EXAMPLE Docs: http://api.jquery.com/click/

Related

How to apply css rules for hidden submenu?

JQuery - Add/Remove class on vertical scroll has no effect

Navigation bar jQuery not working

How to toggle the contents of span when clicked?

responsive sidebar menu and web page

Categories

Resources