centering links in a drop down javascript menu - javascript

I have a drop down menu that has sub menus, the entire menu spans the whole width of the browser, right now the links are all positioned to the left of the screen. What I would like is my links to be all in the center of the screen, with the orange background still spanning the entire width of the browser.
Here is the code:
inside the head goes the javascript and the css, and the rest in the body:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu li").hover(function(){
$(this).children(":hidden").slideDown();
},function(){
$(this).parent().find("ul").slideUp();
});
});
</script>
<style>
#menu{
height: 30px;
background-color:#F90;
}
#menu li li:hover{
background-color:yellow;
cursor:pointer;
}
#menu ul, #menu li{
list-style-type:none;
padding:0;
margin:0;
}
#menu li{
float:left;
width:120px;
list-style-type:none;
line-height:30px;
text-align:center;
}
#menu li ul{
position:absolute;
background-color:#f90;
display:none;
}
#menu li li{
float:none;
padding:2px;
}
#menu a{
color:#000;
text-decoration:none;
}
</style>
<div id="menu">
<ul>
<li>Home</li>
<li>Info
<ul>
<li>example</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
</ul>
</div>

Add margin: auto and display: table:
css
#menu{
height: 30px;
background-color:#F90;
width:100%;
}
#menu li li:hover{
background-color:yellow;
cursor:pointer;
}
#menu ul, #menu li{
list-style-type:none;
padding:0;
margin:auto;/*Add this*/
display: table;/*Add this*/
}
#menu li{
float:left;
width:120px;
list-style-type:none;
line-height:30px;
text-align:center;
}
#menu li ul{
position:absolute;
background-color:#f90;
display:none;
}
#menu li li{
float:none;
padding:2px;
}
#menu a{
color:#000;
text-decoration:none;
}
fiddle

Related

css drop down menu size and image issues

I'm creating a css drop down menu with a image fixed under it. at the moment I'm having trouble getting the image to be the same size as the drop down menu and with getting the menu to be the size of the screen or fill the bar.any help will be greatly appreciated.
heres the css :
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
position:relative;
z-index:5;
margin: 0;
padding: 0;
background-color: #333;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:inline-block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover {
color:#fff;
background:#6b0c36;
text-decoration:none;
}
#nav ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#nav ul li{
padding-top:1px;
float:none;
text-align: center;
}
#nav ul a{
white-space:nowrap;
padding: 14px 16px;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#6b0c36;
text-decoration:none;
background-color: blue;
}
#nav li:hover ul a{
text-decoration:none;
}
#nav li:hover ul li a:hover{
background:#333;
}
<ul id="nav">
<li>
HOME
</li>
<li>
ABOUT
<ul>
<li>OUR STORY</li>
<li>OUR COMMITMENT TO YOU</li>
</ul>
</li>
<li>
LOCATIONS
<ul>
<li>AUSTIN, TX</li>
<li>ATLANTA, GA</li>
<li>SEATTLE, WA</li>
<li>PORTLAND, OR</li>
</ul>
</li>
<li>
PRODUCT
<ul>
<li>NEW ARRIVALS</li>
<li>FEATURED</li>
<li>TOP RATED</li>
<li>HIS</li>
<li>HERS</li>
<li>ACCESSORIES</li>
<li>SPRING CATALOG</li>
<li>THE ESSENTIALS</li>
<li>SALES</li>
</ul>
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
</ul>
</li>
</ul>
<img class="alignnone size-full wp-image-24" src="https://montaviustech.files.wordpress.com/2016/11/death_to_stock_photography_vibrant-10-of-10.jpg" alt="death_to_stock_photography_vibrant-10-of-10" width="absolute" height="" />
Im not sure if this is what your looking for.
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
position:relative;
z-index:5;
margin: 0;
padding: 0;
background-color: #333;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:inline-block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover {
color:#fff;
background:#6b0c36;
text-decoration:none;
}
#nav ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#nav ul li{
padding-top:1px;
float:none;
text-align: center;
}
#nav ul a{
white-space:nowrap;
padding: 14px 16px;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#6b0c36;
text-decoration:none;
background-color: blue;
}
#nav li:hover ul a{
text-decoration:none;
}
#nav li:hover ul li a:hover{
background:#333;
}
<ul id="nav">
<li>
HOME
</li>
<li>
ABOUT
<ul>
<li>OUR STORY</li>
<li>OUR COMMITMENT TO YOU</li>
</ul>
</li>
<li>
LOCATIONS
<ul>
<li>AUSTIN, TX</li>
<li>ATLANTA, GA</li>
<li>SEATTLE, WA</li>
<li>PORTLAND, OR</li>
</ul>
</li>
<li>
PRODUCT
<ul>
<li>NEW ARRIVALS</li>
<li>FEATURED</li>
<li>TOP RATED</li>
<li>HIS</li>
<li>HERS</li>
<li>ACCESSORIES</li>
<li>SPRING CATALOG</li>
<li>THE ESSENTIALS</li>
<li>SALES</li>
</ul>
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
</ul>
</li>
</ul>
<img class="alignnone size-full wp-image-24" src="https://montaviustech.files.wordpress.com/2016/11/death_to_stock_photography_vibrant-10-of-10.jpg" alt="death_to_stock_photography_vibrant-10-of-10" width="100%" height="" />
What i did was change the width of the image from absolute to 100%:
<img class="alignnone size-full wp-image-24" src="https://montaviustech.files.wordpress.com/2016/11/death_to_stock_photography_vibrant-10-of-10.jpg" alt="death_to_stock_photography_vibrant-10-of-10" width="absolute" height="" />
to
<img class="alignnone size-full wp-image-24" src="https://montaviustech.files.wordpress.com/2016/11/death_to_stock_photography_vibrant-10-of-10.jpg" alt="death_to_stock_photography_vibrant-10-of-10" width="100%" height="" />
Just set the width of the image to 100%. That will align menu-bar and image.

Open/Close menu On click using only javascript no jquery

This is my html file
<form id="form1" runat="server">
<div class ="mvbar">
<ul>
<li>Home</li>
<li>About</li>
<li class="pjlist" onclick="load">Projects
<div class="sub1">
<ul>
<div class="arrow1"></div>
<li>Projects1</li>
<li>Projects2</li>
<li>Projects3</li>
</ul>
</div>
</li>
<li class="svlist" onclick="load">Services
<div class="sub2">
<ul>
<div class="arrow2"></div>
<li>Services1</li>
<li>Services2</li>
<li>Services3</li>
<li>Services4</li>
<li>Services5</li>
</ul></div>
</li>
<li>Contact Us</li>
</ul>
</div>
</form>
and this is my css class
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top:30px;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.arrow2 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1 {
visibility:hidden;
}
.sub2 {
visibility:hidden;
}
I can do the same thing in css but requires many exceptions to be added so as to work in each and every browser but javascript is something that I haven't used before and I was suggested that it can be fairly easy to do with it.
So please can someone tell me how to open/close the sub-menu using only javascript.
Thanks in advance!!!
Try this it will work on 'hover' event not on 'click' but full css.
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top: 100%;
width: 50%;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow2,
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1,
.sub2
{
visibility:hidden;
}
ul li:hover div
{
visibility: visible;
}
ul li:hover ul
{
visibility: visible;
}
Try this:
<style>
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top: 100%;
width: 50%;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow2,
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1,
.sub2
{
visibility: hidden;
}
</style>
<form id="form1" runat="server">
<div class ="mvbar">
<ul>
<li>Home</li>
<li>About</li>
<li id="pjlist">Projects
<div class="sub1">
<ul>
<div class="arrow1"></div>
<li>Projects1</li>
<li>Projects2</li>
<li>Projects3</li>
</ul>
</div>
</li>
<li id="svlist" onclick="load">Services
<div class="sub2">
<ul>
<div class="arrow2"></div>
<li>Services1</li>
<li>Services2</li>
<li>Services3</li>
<li>Services4</li>
<li>Services5</li>
</ul></div>
</li>
<li>Contact Us</li>
</ul>
</div>
</form>
</body>
</html>
<script>
var myMenu = document.getElementById("pjlist");
var open = false;
myMenu.addEventListener("click", function()
{
if(open)
{
//then close
open = !open;
var mySubMenu = myMenu.getElementsByTagName('div');
mySubMenu[0].style.visibility = 'hidden';
}
else
{
//open
open = !open;
var mySubMenu = myMenu.getElementsByTagName('div');
mySubMenu[0].style.visibility = 'visible';
}
});
</script>
You can use
var myMenus = document.getElementsByClassName()
to add the event listner on all your menu children.
Good Luck

How to expand and collapse a responsive mobile menu

I have created a responsive menu, all that is left is to make it toggle. I am unsure as how to show the menu when the word menu is pressed. By default the menu is collapsed, then when the menu button is pressed it expands and when the button is pressed again it collapases.
Could someone please help me out as I am new and unsure about this. I have uploaded my project onto jsfiddle. link
http://jsfiddle.net/bLbdavqu/2/
HTML:
<div id="nav"><!--nav-->
<div id="pull">
Menu
</div>
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div><!--/nav-->
CSS:
body {
background:brown;
}
#pull {
display:none;
float:left;
height:auto;
width:100%;
}
#pull img {
float:right;
}
#nav{
float:left;
height:155px;
width:63%;
background:url(../images/top-banner.png) no-repeat;
background-position:bottom;
background-size:100%;
position:relative;
}
#nav ul {
height:auto;
width:100%;
list-style-type:none;
position:absolute;
bottom:0;
*zoom:1;
}
#nav ul li {
float:left;
padding-left:20px;
position:relative;
}
#nav ul li a {
font-family:Trajan-Pro;
font-size:0.9em;
color:#fff;
text-decoration:none;
}
#nav ul li a:hover {
color:#d2aa76;
border-bottom:2px solid #d2aa76;
padding-bottom:5px;
}
#nav ul li:hover > a {
color:#d2aa76;
border-bottom:2px solid #d2aa76;
padding-bottom:5px;
}
/*1st level sub-menu */
#nav ul ul {
display:none;
}
#nav ul li:hover > ul {
height:auto;
width:180px;
display:block;
}
#nav ul ul li:hover > a {
color:#d2aa76;
border-bottom:none;
}
#nav ul ul {
padding:0;
position:absolute;
top:100%;
padding-top:15px;
}
#nav ul ul li {
float:none;
position:relative;
padding:7px 0px;
border-top:1px solid #000;
background: #423d33;
background: linear-gradient(top, #423d33 0%, #4a4843 40%);
background: -moz-linear-gradient(top, #423d33 0%, #4a4843 40%);
background: -webkit-linear-gradient(top, #423d33 0%,#4a4843 40%);
-webkit-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
-moz-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
transition: all 300ms cubic-bezier(0.175,0.885,0.32,1.275) 0;
}
#nav ul ul li a {
font-size:0.8em;
padding-left:15px;
}
#nav ul ul li a:hover {
border-bottom:none;
}
#media screen and (max-width: 1900px) {
#logo {
height:95px;
width:100%;
background:none;
}
#logo h1 {
top:0;
margin:0;
padding-top:10px;
}
#header-container {
height:auto;
}
#pull {
display:block;
}
#nav {
height:100%;
width:100%;
background:none;
margin:0;
padding:0;
clear:both;
}
#nav ul {
height:100%;
position:static;
margin:0;
padding:0;
display:block;
}
#nav ul > li {
float: none;
}
#nav ul li {
padding-left:0px;
}
#nav ul li a {
display:block;
padding: 9px 9px;
position: relative;
z-index:100;
}
#nav ul ul {
position:relative;
top:0;
bottom:0;
margin:0;
padding:0;
}
#nav ul li:hover > ul {
height:auto;
width:100%;
}
#nav ul ul li {
border-top:none;
background: #615f5b;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#nav ul ul li a {
display: block;
padding-left:30px;
position: relative;
z-index: 100;
}
#nav ul > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
You can use javascript to change the attribute:
I made a jsfiddle: http://jsfiddle.net/bLbdavqu/3/
function show(){
var show = document.getElementById('the_menu');
show.setAttribute('style','display:inline');
}
You can wrap it inside a div to make it easier and then change the display from none to inline. Question: do you want to give users the change to hide the menu when they click again on menu?
Or, if you are ready to use jquery, just use toggle:
$(document).ready(function(){
$('button').click(function () {
$("#toggle").toggle();
});});
http://jsfiddle.net/bLbdavqu/5/
<div id="nav"><!--nav-->
<div id="pull">
Menu
</div><br/><br/>
<div id="the_menu">
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div><!--/nav-->
</div>
Script
<script>
function show(ValueToggle){
if(ValueToggle==1){
$('#the_menu').show();
$('#pulls').attr('onClick','show(0)');
} else {
$('#the_menu').hide();
$('#pulls').attr('onClick','show(1)');
}
}
</script>
You can use JQuery to toggle Menu http://jsfiddle.net/bLbdavqu/8/
Just Change the CSS of the ul.
Hide List- $( "#mylist" ).css("display","none");
Show List- $( "#mylist" ).css("display","block");
I think you want to show the menu items("Home","About Gnosis",etc) on click of link "menu" and
again hide these items on click of link "menu" . I made a jsfiddle for you http://jsfiddle.net/Tushar490/kL1dgvmr/6/
<div id="nav"><!--nav-->
<div id="pull">
Menu
</div>
<div id="bs-example-navbar-collapse-2">
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div>
</div><!--/nav-->
Script :-
$(document).ready(function () {
$("#pull").on('click',function () {
$("#bs-example-navbar-collapse-2").toggle();
});
});
In CSS you just need to remove "float:left;" from "#pull" .
Hope this would help to you !!
here is the solution please see the code at
$(document).ready(function(){
$('#test').hide();$('#pull').click(function () {$("#test").toggle();});});
http://jsfiddle.net/bLbdavqu/12/
the updation of your requirements.

Header not filling entire page?

My header is set to a width of 100%, yet on the left side of the page there is a big gap although this isn't present on the right side of the page. Any thoughts?
Here is my code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GS4 Concept Home Page</title>
<link type="text/css" href="unicss.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script src="Script/jquery.js"></script>
<script src="Script/main.js"></script>
</head>
<body>
<div id="header">
<div class="nav">
<ul class="navigation">
<li>Home</li>
<li>Galaxy S4
<ul>
<li>Verizon</li>
<li>ATT</li>
<li>Sprint</li>
<li>T-Mobile</li>
<li>International</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body{
background-image:url(Images/backgroundmain.jpg);
min-width:100%;
font-family: Arial, Helvetica,sans-serif;
font-size:15px;
}
#header{
position:fixed;
text-align:center;
background-color:#474747;
margin:auto;
width:100%;
height:50px;
display:block;
min-width:1000px;
}
#container{
background-color:#FFF;
margin:auto;
width:70%;
}
.nav{
text-align:center;
background-color:#999;
}
.navigation {
position:fixed;
display:block;
margin-top:15px;
padding:0;
list-style:none;
}
.navigation li {
float:left;
width:150px;
position:relative;
}
.navigation li a {
background:#262626;
color:#fff;
display:block;
padding:8px 7px 8px 7px;
text-decoration:none;
border-top:1px solid #666;
border-bottom:1px solid #666;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#666;
}
.navigation ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:1px solid #666;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
}
.navigation ul a {
display:block;
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px solid #666;
}
.navigation ul a:hover {
color:#666;
}
JavaScript (If it matters..?):
// Executes the function when DOM will be loaded fully
$(document).ready(function () {
// hover property will help us set the events for mouse enter and mouse leave
$('.navigation li').hover(
// When mouse enters the .navigation element
function () {
//Fade in the navigation submenu
$('ul', this).fadeIn(); // fadeIn will show the sub cat menu
},
// When mouse leaves the .navigation element
function () {
//Fade out the navigation submenu
$('ul', this).fadeOut(); // fadeOut will hide the sub cat menu
}
);
});
You need to remove the default margin on the body by adding margin:0:
body {
background-image:url(Images/backgroundmain.jpg);
min-width:100%;
font-family: Arial, Helvetica, sans-serif;
font-size:15px;
margin:0;
}
jsFiddle example
Try setting *{margin: 0; padding: 0;} to remove any padding/margin the browser automatically puts on elements.
you are using a padding and margin on body element the sum is 30 px
delete the padding and margin or make it 0
to fill the width

Change Menu hover to click/active CSS

I tried to change my menu from hover to click but if i click the menu the sub-menus also close so fast I think I need a javascript for onclick and toggle but don't know how to be done. Please help I'am a newbie
/* menu */
#menu{ margin:0px 0px; margin-top:67px; margin-left:90px; list-style:none; color:#fff; line-height:30px; display:inline-block; float:left; height:-100px; width:1000px; }
#menu1{ margin:0px 0px; margin-top:auto; margin-left:-50px; list-style:none; color:#fff; line-height:30px; display:inline-block; float:left; height:auto; width:95px; }
#menu a { color:#000; text-decoration:none; }
#menu > li {background:#fff none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px; z-index:999 !important;}
#menu > li a:hover {color:#B0D730;}
#menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;}
/* sub-menus*/
#menu ul { padding:0px; margin:0px; display:block; display:inline;}
#menu li ul { position:absolute; left:-10px; top:0px; margin-top:30px; width:200px; line-height:16px; background-color:#FFF; color:#FFF; /* for IE */ display:none; }
#menu li:hover ul { display:block;}
#menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type:none; }
#menu li ul li:first-child { border-top: none; }
#menu li ul li a { display:block; color:#0395CC; }
#menu li ul li a:hover { color:#7FCDFE; }
/* main submenu */
#menu #main { left:0px; top:-20px; padding-top:20px; background-color:#FFF; color:#fff; z-index:999 !important;}
On Click
In your HTML code, you can have Javascript actions happen on click:
<p onclick="clickedText()">Click Me!</p>
The necessary Javascript code would be:
var clickedText = function() {
//Insert Code Here That's On Click
}
To access an element by id use the following Javascript code:
var element = document.getElementById("id");
Then you can use:
element.style.display = "none";
Speed
If something is closing too fast, and you are using display: none;, that is because you are telling the browser to display nothing this exact second.
Your CSS code is telling the browser to not display the submenu.
CSS Code
This is where a sample of your HTML file would come in handy. You are telling the browser the following:
#menu li:hover ul { /*Do stuff*/ }
That means it selects all ul in a hovered upon li that is in #menu.
I think that a CSS Selector Reference would help you a lot.
Suggestions
I suggest that you give a snippet of the HTML code.
I suggest that you try this, this, and this tutorial.
I suggest that you take a look at the :not() CSS selector.

Categories