expanding the width of drop down menu - javascript

how to increase the width of drop down menu...
when you hover over the services link a drop down menu pop up appears....
in this pop up i have included the text fields so i need to increase the width of the drop down menu....
i tried increasing the width of sub class all form fields becomes inline but not working....
providing my code below....
http://jsfiddle.net/3VBQ6/1/embedded/result/
<ul class="sub">
<li><a href="#nogo23"><span class='label'>Name</span>
<span><input type="text" name="lastname" /></span></a>
</li>
<li>Company <span><input type="text" name="lastname" /></span>
</li>
<li>Email <span><input type="text" name="lastname" /></span>
</li>
<li><input type="submit" value="Submit" />
</li>
</ul>

try to change the ul and li width to auto and add a min-width:90px
like this:
#nav li:hover ul.sub {
left:1px;
top:38px;
background: #bbd37e;
padding:3px;
border:1px solid #5c731e;
white-space:nowrap;
width: auto;
min-width:90px;
height:auto;
z-index:300;
}
#nav li:hover ul.sub li {
display:block;
height:20px;
position:relative;
float:left;
width: auto;
min-width:90px;
font-weight:normal;
}
#nav li:hover ul.sub li a {
display:block;
font-size:11px;
height:18px;
width: auto;
min-width:90px;
line-height:18px;
text-indent:5px;
color:#000;
text-decoration:none;
border:1px solid #bbd37e;
}
Also I added some styles for the input fields
#nav li:hover ul.sub li a input {
font-size:11px;
height:18px;
width: auto;
min-width:90px;
line-height:18px;
color:#000;
text-decoration:none;
}

You've got hard coded widths for all the submenus which you do not need.
If you remove all the widths and the float:left; item from 'ul.sub li' which is not needed
You can target that specific menu item by adding a class to it you can adjust just that item via CSS.
#nav li:hover ul.sub.frm { width: 155px; }
.frm a .label { display: inline-block; width: 60px; }
.frm a input[type="text"] { width: 80px; }
UPDATED FIDDLE

Related

Click function doesn't work in my JQuery

$(document).ready(function(){
$("#menu-trigger").click(function(){
$("#menu").slideToggle();
});
});
#menu {
width: 100%;
height: 35px;
}
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
background: blue;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 10px 0 0;
position: relative;
background:blue;
}
ul.topnav li a {
color:red;
padding: 10px 5px;
float: left;
display:block;
font-size: 12px;
text-transform: uppercase;
font-style: normal;
}
ul.topnav li a:visited, ul.topnav li a:active, ul.topnav li a:link {
color: #fff;
text-decoration: none;
}
ul.topnav li a:hover {
background: violet;
color:white;
}
ul.subnav{
display:none;
position:absolute;
top:100%;
padding:0;
}
ul.subnav li{
list-style: none;
float:left;
width:100%;
}
ul.subnav a{
line-height:120%;
padding:10px 15px;
}
ul.topnav li:hover>ul.subnav{
display:block
}
#menu-trigger{
display:none;
}
#media screen and (max-width:600px){
#menu{
display:none;
}
#menu-trigger{
display:block;
}
ul.topnav li{
float:none;
}
ul.topnav li a{
float:none;
border-bottom:2px solid red;
}
}
<span id="menu-trigger">MENU</span>
<div id="menu">
<ul class="topnav">
<li><a>Home</a>
</li>
<li><a>About Us</a>
<ul class="subnav">
<li><a>Introduction</a>
</li>
<li><a>History</a>
</li>
<li><a>Mission/Vision Statement</a>
</li>
</ul>
</li>
<li><a>Basic Education</a>
<ul class="subnav">
<li><a>Introduction</a>
</li>
<li><a>The Basic Ed</a>
</li>
<li><a>About Basic Ed</a>
</li>
</ul>
</li>
<li><a>IB</a>
</li>
<li><a>College</a>
</li>
<li><a>Contact Us</a>
</li>
</ul>
</div>
I can't find what seems to be the problem in my code specifically in jQuery. The click and slideToggle event wont work. What I want is when the screen reach its max-width, horizontal menu will no longer show, instead when you click on MENU slide-up and down will toggle resulting in vertical and mobile friendly navigation menu. I simply followed some tutorials in Youtube but it doesn't work on me.
Try this:
$(document).ready(function(){
$("#menu-trigger").on('click', function(){
$("#menu").slideToggle();
});
});
here you can take a look how it's working when you click on the #menu-trigger link

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.

centering links in a drop down javascript menu

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

Drop Down Menu Similar to xenForo?

How can I create a dropdown menu similar to xenforo, which will automatically close after 2 seconds?
I've tried searching but unfortunately couldn't find any proper solution.
But I don't know how to and what code to put to achieve like; 1. The drop down menu open after 2 seconds if the mouse cursor hovers over the main menu link for 2 seconds. 2. The drop down closes if the mouse cursor is away from the drop down for 2 seconds.
Thanks!
Here is Jsfiddle;
Try this:
$(document).ready(function(){
$("#sub-menu li").hide(); // Hide in order to fadeIn to work
$("#main-menu ul").hover(
function(){
$("#sub-menu li").fadeIn(slow);
},
function(){
$("#sub-menu li").fadeOut(slow);
});
});
You can use jquery to use this functionality. Instead of waiting for 2 seconds you can use fade out slow so that users can know something will happen.
$(document).ready(function(){
$("#sub-menu").hide(); // Hide in order to fadeIn to work
$("#main-menu").hover(
function(){
$("#sub-menu").fadeIn(slow);
},
function(){
$("#sub-menu").fadeOut(slow);
});
});
<html>
<head>
<style>
.dd_menu {
background: none;
padding: 0px;
margin:0;
list-style-type:none;
height:10px;
border: none;
font-size: 11px;
font-family: "Candarab";
}
.dd_menu li {
background: none;
float: left !important;
height:20px;
margin-left: 1px;
margin-top: 4px;
}
.dd_menu li a {
padding: 15px 5px;
display:inline;
color:#000;
text-decoration:none;
font:11px arial, verdana, sans-serif;
}
.dd_menu li:hover a {
text-decoration:none;
padding: 15px 5px;
}
.dd_menu ul {
position:absolute;
left:-9999px;
top:9px;
list-style-type:none;
text-decoration: none;
float: left !important;
}
.dd_menu li:hover {
position:relative;
background:#176093;
text-decoration: none;
z-index: 1000;
}
.dd_menu li:hover ul {
left:0px;
top:20px;
background:lavender;
padding: 3px 3px;
border:1px solid grey;
width:160px;
text-decoration: none;
}
.dd_menu li:hover ul li {
height:18px;
border:none;
}
.dd_menu li:hover ul li a {
height:18px;
padding:0px;
display:block;
font-size:11px;
width:158px;
line-height:18px;
text-indent:5px;
color:#444;
background-color:lavender;
text-decoration:none;
border:1px solid transparent;
}
.dd_menu li:hover ul li a:hover {
height:18px;
background:silver;
color:#000;
float: left;
border:solid 1px #444;
}
</style>
</head>
<body>
<ul class="dd_menu">
<li>Main Menu <span class="smallesttext">▼</span>
<ul>
<div align="left">
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
</div>
</ul>
</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".dd_menu li a").hover(
function(){
$(".dd_menu li ul div li a").hide().fadeIn('slow');
},
function(){
});
$("ul div li").hover(
function(){
$(".dd_menu li ul div li a").show();
},
function(){
;
});
});
</script>
</body>
</html>
Try this. Similarly add what you want on mouse out. If it helped think about accepting the answer.

How to convert a Horizontal Menu with vertical submenus into a Vertical Accordion menu with submenus?

I want to make my menu so that when I am at a certain window size, like on mobile, my menu will convert to a vertical drop down accordion menu. I am familiar with media queries and responsive/adaptive designs, but I can't get my submenu to vertically drop/slide down, either on hover or click.
Here is my Fiddle
HTML:
<!--MENU UNDER HEADER BEGINS-->
<table id="menubar" width="0" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="navmenu"> <!--#navmenu DIV menu contents start here-->
<ul>
<li>
HOME
</li>
<li>
ABOUT ME
</li>
<li class="slidedown">
GRAPHIC DESIGN
<ul>
<li>Hobbyist/Independent</li>
<li>Job & FreeLance</li>
<li>University At Buffalo</li>
</ul>
</li>
<li class="slidedown">
WEB DESIGN
<ul>
<li>Hobbyist/Independent</li>
<li>Job & FreeLance</li>
<li>University At Buffalo Website</a></li>
</ul>
</li>
<li class="slidedown">
PHOTOGRAPHY
<ul>
<li>Hobbyist/Independent</li>
<li>Job & Freelance</li>
<li>Student Projects</li>
</ul>
</li>
<li>
CONTACT ME
</li>
</ul>
</div> <!--#navmenu DIV menu contents end here-->
</td>
</tr>
</table>
<!--menu under header ends-->
CSS:
html, body {
height: 100%;
overflow-x:hidden;
overflow-y:hidde;
margin:auto;
}
#wrap {
margin:auto;
min-height: 100%;
background-image: url(style/flourish-bg.png);
background-repeat:no-repeat;
background-position: top center;
z-index:0;
}
#header {
width:1024px;
height:160px;
background-repeat: no-repeat;
}
#bgheader {
background-image: url(style/bgheader.jpg);
background-repeat:repeat-x;
height:160px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
background-repeat: no-repeat;
background:#000;
}
/*----------MENU-----------*/
/*main menu*/
a:link {color:#fff; text-decoration:none;}
a:visited {color: #868D65;}
a:hover {color:#000;}
a:active {color: #868D65;}
#navmenu {
width:100%;
height:80px;
margin-right:auto;
margin-left:auto;
}
/*holds the listed items on main menu*/
#navmenu ul {
width:100%;
margin:0;
padding: 0;
list-style:none;
text-decoration:none;
}
/*keeps main menu horiztonal, and effects the actualy list items, overrides any other menu float*/
#navmenu li {
float:left;
padding: 30px 7px;
position:relative;
list-style:none;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:12px;
text-decoration: none;
border-top: 2px solid #868D65;
border-bottom: 2px solid #868D65;
transition: border-radius 1s, background 1s;
-moz-transition: -moz-border-radius 1s, background 1s;
-webkit-transition: -webkit-border-radius 1s, background 1s;
z-index:200;
}
/*menu styling for hover, WHEN IMAGE IS ADDED, IT APPLIES TO ALL HOVER ACTIONS ON EVERY MENU*/
#navmenu li:hover {
background: #eee;
background-image: url(style/bgheader.jpg);
transition: border-radius 1s, background 1s;
-moz-transition: -moz-border-radius 1s, background 1s;
-webkit-transition: -webkit-border-radius 1s, background 1s;
z-index:200;
}
/*SUB MENU STARTS*/
/*this hides the submenu*/
#navmenu li ul {
position: absolute;
top:75px;
visibility:hidden;
padding-left:0px;
}
/*this shows the submenu on hover over main menu*/
#navmenu li:hover ul {visibility:visible;}
/*sub menu styling*/
#navmenu li ul li {
float:none;
width: 160px;
font-size:12px;
text-align:center;
padding: 15px 5px 10px 5px;
background: #222222;
border: 1px solid #FFF;
color: #FFF;
position:relative;
margin-left: -6px;
}
/*sub menu styling for hover*/
#navmenu li ul li:hover {
font-size:12px;
color: #000;
background-color: #868D65;
}
Here you go
#media (max-width:600px) {
tr td #navmenu li {
width:100%; // makes each item takes up the whole screen
}
tr td #navmenu li ul {
position:relative !important; // removes the position absolute so that it doesn't overlap the higher up menu items
top:0; // puts it right next to the menu item
display:none; // so there is no unnecessary white space when the `li` isn't being hovered over
}
tr td #navmenu li:hover ul {
display:block; // shows the submenu when you hover over the higher `li`s
}
}
put something like this in your mobile layout's media query
#navmenu li {
display: block;
text-align: center;
float:none;
}
#navmenu li ul {
display: none;
position: relative;
top:0;
visibility:hidden;
}
since your technique on how to show submenu is purely css (:hover on parent and visibility:visible), we need js/jquery because our child menu is display:none now
$('li.slidedown').hover(function() {
$(this).find('ul').slideDown();
}, function() {
$(this).find('ul').slideUp();
});
havent checked my codes, byt i hope you got my point

Categories