We Keep Coding

Slidetoggle not working properly when within LI

I am trying to show/hide div on click with slidetoggle, its working properly but when I click on input, its still showing/hiding, how do I make it working only on LI not on inner elements.
Here is the working JSfiddle Demo
Limitation I have is I can't bring that div out of LI as currently its within LI tag
Here is the function I have created for that:
$('#location').click(function(){
$(".location_contents").slideToggle(600);
$(".header_right > ul > li:nth-child(1)").toggleClass('actbtn');
});

If you will trigger function while clicking parent div, it also will trigger when child is clicked, you can use immediate child selector,
$('#location > a').click(function(){
$(".location_contents").slideToggle(600);
$(".header_right > ul > li:nth-child(1)").toggleClass('actbtn');
});

Are you looking for this?
I have added a class toggleable in <a> because there may be use
many <a> and in script i have selected 2 selector one toggleable
class and another one list item.
$('#location .toggleable, #location ul li').click(function(){
$(".location_contents").slideToggle(600);
$(".header_right > ul > li:nth-child(1)").toggleClass('actbtn');
});
/*Location Popup*/
.location_contents {background: #fff; max-width: 450px; min-width: 450px; position: absolute; left: 0; top: 68px; width: 100%; z-index: 2; border-radius:4px; box-shadow:0 6px 8px -1px rgba(0, 0, 0, 0.5); display:none;}
.location_contents:after {bottom: 100%; left: 85%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(232, 248, 255, 0); border-bottom-color: #e8f8ff; border-width: 15px; margin-left: -15px;}
.location_contents_head {background: #e8f8ff; float: left; padding: 15px; width: 100%; box-sizing:border-box; color:#404040;}
.location_contents_head > input{width:100%; display:block; padding:8px; border:1px solid #d7d7d7; font-size:14px; color:#404040; box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset; height:45px;}
.location_contents_body{float:left; width:100%; background:#fff; padding:15px; box-sizing:border-box; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;}
.location_contents_body > ul{list-style:none; margin:0; padding:0;}
.location_contents_body > ul > li{display:block; float:left; font-size:14px; color:#404040; display:block; float:left; min-width:140px; text-align:left; padding:3px 0;}
.location_contents_body > ul > li > span {padding: 4px 10px; display:inline-block; transition: all 0.3s ease 0s; border-radius: 2px;}
.location_contents_body > ul > li:hover > span {background: #0076AA; color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_right">
<ul>
<li id="location" class="actbtn">
<i class="ico ico_location"></i> Delhi/NCR
<div class="location_contents" style="display: block;">
<div class="location_contents_head"><input placeholder="Enter Your City" type="text"></div>
<div class="location_contents_body">
<ul>
<li><span>Agra</span></li>
<li><span>Aligarh</span></li>
<li><span>Allahabad</span></li>
<li><span>Ambala</span></li>
<li><span>Amritsar</span></li>
<li><span>Bhopal</span></li>
<li><span>Chandigarh</span></li>
<li><span>Dehradoon</span></li>
<li><span>Delhi/NCR</span></li>
<li><span>Indore</span></li>
<li><span>Lucknow</span></li>
<li><span>Ludhiana</span></li>
<li><span>Mathura</span></li>
<li><span>Meerut</span></li>
<li><span>Patiala</span></li>
</ul>
</div>
</div>
</li>
<li id="login"><i class="ico ico_user"></i> Login</li>
</ul>
</div>

How To Code A Hovering Navigation Bar To Appear Only When You Start Scrolling

I would like to have my hovering/sticky navigation bar appear when a reader/web visitor has scrolled passed the blog header, instead of the navigation bar appearing at all times, as it currently does. I'm not entirely sure how to achieve this affect as I have done research on this but to no avail, but I am certain it is completely doable. I have seen this effect on two blogs, one of which is hosted on Blogger, the URL of these sites are as follows : http://www.theweekendattic.com/ and http://mediamarmalade.com/. The URL to my own blog is as follows : http://www.blankesque.com
The CSS and HTML coding for the hovering navigation bar currently on my site is detailed below :
#wctopdropcont{
width:100%;
height:45px;
display:block;
padding: 5.5px 0 0 0;
z-index:100;
top:-2px;
left: 0px;
position: fixed;
background:#f5f5f5;
border-bottom: 1px solid #f0f0f0;
}
#wctopdropnav{
float: left;
width:97%;
height:7px;
display:block;
padding:0px;
}
#wctopdropnav li{
float:left;
list-style:none;
line-height:13px;
padding: 10px 6.5px 6.5px 6.5px;
background:#f5f5f5;
}
#wctopdropnav li a, #wctopdropnav li a:link{
color:#494949;
float: left;
display:block;
text-transform: uppercase;
font-size: 10.5px!important;
font-family: karla, arial!important;
padding: 5px;
text-decoration:none;
font-weight: normal!important;
letter-spacing : 0.09em;
}
#wctopdropnav li:first-child a {
font-weight: bold!important;
margin-left: 20px;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a {
color: #a6a6a6;
font-weight: normal;
padding: 5px;
background: #f5f5f5;
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 10.5px;
background:#f5f5f5;
color: #494949;
width: 90px;
margin: 0px;
padding: 0;
line-height: 15px;
position: relative;
}
#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: #a6a6a6;
background: #f5f5f5;
filter: #f5f5f5;
}
#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
#socialmediabuttons {
display: block;
float: right;
position: relative;
margin: 0.9% -1% 0 0;
}
#socialmediabuttons a {
padding: 0 0 0 18px;
}
#socialmediabuttons a:hover {
opacity: 0.4;
filter: alpha(opacity=40);
}
</style>
<div id='wctopdropcont'>
<div id='wctopdropnav'>
<li><a href='http://www.blankesque.com'>Home</a></li>
<li><a href='http://www.blankesque.com/search/label/Advice'>Advice</a></li>
<li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
<li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
<li><a href='http://www.blankesque.com/search/label/Lifestyle'>Lifestyle</a></li>
<li><a href='http://www.blankesque.com/search/label/Skin & Hair'>Skin & Hair</a></li>
<div id='socialmediabuttons'>
<a href='https://www.pinterest.com/blankesque' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/91F98FB1-242C-428E-A472-50F7D511C38E_zpsaiuhz6yb.gif' width='20px'/>
</a>
<a href='https://www.twitter.com/' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/923FF7F8-5AA7-4676-935F-2CB5FF465122_zpsmctqg100.gif' width='20px'/></a>
<a href='http://www.bloglovin.com/blogs/blankesque-14431777' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/7CC1080E-1911-4D0B-B99F-55109C044D54_zps2ky5dfgt.gif' width='20px'/></a>
<a href='https://instagram.com/' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/C6567CDB-FB01-4F2D-A2FD-D0D875A30B80_zps5mgdqong.gif' width='20px'/></a>
</div>
</div></div>

You can use jQuery fadein/fadeout in scroll event:
$(document).ready(function(){
$(".navbar").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.navbar').fadeIn();
} else {
$('.navbar').fadeOut();
}
});
});
});

force bootstrap twitter nav dropdown to be 100% height of window

I have been trying to over write the built in Bootstarp style on navbar dropdowns to no avail. I have some javascript trying to force it but I cant seem to get this to work. The native bootstrap javascript overwrites mine and it snaps back to being 228px height. Here is my code:
// CLOSE NAV BARS NO OVERLAPPING
$('.navbar button').click(function(){
var $target = $($(this).data('target'));
if(!$target.hasClass('in')){
$('.navbar .in').removeClass('in').height(0);
}
});
//DROPDOWN MODE SELECTOR LOGIN
// Force 100% height mobile navigation
$('#navbar-collapse-1, #navbar-collapse-2').css('height', $(window).height());
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.modeSelector').find('.dropdown-toggle').html(selText+' <span class="modeSelect menu_toggleable glyphicon glyphicon-menu-down pull-right"></span>');
});
$('#myMode-glyphicon-mobile, #myMode-glyphicon').on('show.bs.dropdown', function () {
$(".modeSelect").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
});
$('#myMode-glyphicon-mobile, #myMode-glyphicon').on('hidden.bs.dropdown', function () {
$(".modeSelect").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
});
// FLIP ALL THE GLYPHICONS NAVBAR
$('#navbar-collapse-1').on('shown.bs.collapse', function () {
$(".myMenu-glyphicon").removeClass("glyphicon-menu-down");
$(".myMenu-glyphicon").addClass("glyphicon-menu-up");
$(this).addClass("dropdown-open").removeClass("dropdown-closed");
if( $('#navbar-collapse-2').hasClass('dropdown-open') ){
$(".myLogin-glyphicon").removeClass("glyphicon-menu-up");
$(".myLogin-glyphicon").addClass("glyphicon-menu-down");
$("#navbar-collapse-2").removeClass("dropdown-open");
$("#navbar-collapse-2").addClass("dropdown-closed");
}
});
$('#navbar-collapse-1').on('hidden.bs.collapse', function () {
$(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
$(".myMenu-glyphicon").addClass("glyphicon-menu-down");
$(this).removeClass("dropdown-open").addClass("dropdown-closed");
});
$('#navbar-collapse-2').on('shown.bs.collapse', function () {
$(".myLogin-glyphicon").removeClass("glyphicon-menu-down");
$(".myLogin-glyphicon").addClass("glyphicon-menu-up");
$(this).addClass("dropdown-open").removeClass("dropdown-closed");
if( $('#navbar-collapse-1').hasClass('dropdown-open') ){
$(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
$(".myMenu-glyphicon").addClass("glyphicon-menu-down");
$("#navbar-collapse-1").removeClass("dropdown-open");
$("#navbar-collapse-1").addClass("dropdown-closed");
}
});
$('#navbar-collapse-2').on('hidden.bs.collapse', function () {
$(".myLogin-glyphicon").removeClass("glyphicon-menu-up");
$(".myLogin-glyphicon").addClass("glyphicon-menu-down");
$(this).removeClass("dropdown-open").addClass("dropdown-closed");
if( $('#navbar-collapse-1').hasClass('dropdown-open') ){
$(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
$(".myMenu-glyphicon").addClass("glyphicon-menu-down");
}
});
HTML
<div class="header">
<!-- BEGIN SEARCH AND LOGIN -->
<div class="container">
<div class="col-sm-4 logo hidden-xs"><img class="img-responsive" title="TMC Logo" src="images/tmcLogo.png" alt=""></div>
<div class="col-sm-4 login-wrapper hidden-xs">
<ul class="list-inline header-list">
<li>Login to Navisphere</li>
<li id="myMode-glyphicon" class="pull-right list-unstyled dropdown modeSelector">
Shippers <span class="modeSelect glyphicon glyphicon-menu-down"></span>
<ul class="modes list-unstyled dropdown-menu" role="menu">
<li>Navisphere</li>
<li>CHRWTrucks</li>
<li>CHREUTransport</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
<form class="login-form" role="login">
<div class="form-group">
<input type="text" class="user-input form-control" placeholder="Username">
<input type="text" class="pass-input form-control" placeholder="Password">
<button type="submit" title="Login" class="btn btn-default"><i class="glyphicon glyphicon-arrow-right"></i></button>
</div>
</form>
</div>
<div class="col-sm-4 search-wrapper hidden-xs">
<form class="search-form" role="search">
<div class="form-group">
<input type="text" class="search-input form-control" placeholder="Search">
<button type="submit" title="Search TMC" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</div>
</form>
</div>
</div>
<div class="row mobileNav">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand hidden-md hidden-xl hidden-sm hidden-lg" href="#"><img class="img-responsive" title="TMC Logo" src="images/tmcLogo.png" alt=""></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="autocollapse" data-target="#navbar-collapse-1">
<span class="menu-toggle-text">MENU <i class="myMenu-glyphicon glyphicon glyphicon-menu-down"></i></span>
</button>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
<span class="menu-toggle-text">LOGIN <i class="myLogin-glyphicon glyphicon glyphicon-menu-down"></i></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse dropdown-closed" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<form class="search-form mobileSearch-form hidden-sm hidden-md hidden-xl hidden-lg" role="search">
<div class="form-group">
<input type="text" class="search-input form-control" placeholder="Search">
<button type="submit" title="Search TMC" class="btn btn-default mobileSearch-btn"><i class="glyphicon glyphicon-search"></i></button>
</div>
</form>
<li class="active dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">SERVICES <span class="sr-only">(current)</span></a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li>TMS Technology</li>
<li>Process Management</li>
<li>Consulting</li>
<li>Small Business Technology</li>
<li>Global Control Tower</li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">RESULTS</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li>Manufacturing</li>
<li>Automotive</li>
<li>Food</li>
<li>Produce</li>
<li>Retail</li>
<li>Paper/Packaging</li>
<li>Beverage</li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">RESOURCES</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li>Videos</li>
<li>White Papers</li>
<li>Case Studies</li>
<li>Blog</li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">ABOUT</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li>Our Story</li>
<li>Values</li>
<li>Leadership</li>
<li>Careers</li>
<li>News</li>
<li>Charitble Giving</li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">CONTACT</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li>Locations</li>
<li>Connect with an Expert</li>
<li>Email News</li>
<li>Update Preferences</li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<div class="collapse navbar-collapse dropdown-closed" id="navbar-collapse-2">
<ul class="nav navbar-nav hidden-md hidden-xl hidden-sm hidden-lg mobileLogin">
<li>
<ul class="header-list list-unstyled">
<li class="list-unstyled mobile">Login to Navisphere</li>
<li id="myMode-glyphicon-mobile" class="list-unstyled dropdown modeSelector">
Shippers <span class="modeSelect glyphicon glyphicon-menu-down pull-right"></span>
<ul class="mobileList list-unstyled dropdown-menu mobile" role="menu">
<li>Navisphere</li>
<li>CHRWTrucks</li>
<li>CHREUTransport</li>
</ul>
</li>
</ul>
</li>
<div class="clearfix"></div>
<form class="login-form" role="login">
<div class="form-group">
<input type="text" class="user-input form-control longin-control" placeholder="Username">
<input type="text" class="pass-input form-control login-control" placeholder="Password">
<button type="submit" title="Login" class="btn btn-default mobileSearch-btn pull-right"><i class="glyphicon glyphicon-arrow-right"></i></button>
</div>
</form>
</ul>
</div>
</div><!-- /.container -->
</nav>
</div>
</div>
<!-- END HEADER -->
CSS
CSS
/************* BASIC STYLES **************/
a {
color:#tmcLightblue;
text-decoration:none;
}
a:hover {
text-decoration:none;
}
p {
margin: 10px 0;
}
body{
font-family:"Lato";
overflow-x:hidden;
}
html,body {
height: 100%;
min-height: 100%;
}
/********* NAV STYLES *********/
.dividerNav{
height:4px;
background-color:#fff;
}
.navbar.navbar-default > .container{
border-bottom:1px solid #tmcDarkblue
}
.menu-toggle-text{
color:#4fb4e1;
}
.navbar-toggle{
border:none;
padding:9px 1px;
}
.navbar-toggle:hover .navbar-toggle:focus{
background-color:none;
}
.hover-dropdown{
background-color:transparent;
}
.hover-dropdown ul{
border: medium none;
border-radius:0px;
background-color: rgba(0,58,99,0.80);
padding: 25px 0;
}
.navbar .hover-dropdown li a{
color:#fff;
margin: 0 18px;
}
.header-list{
margin-bottom:4px;
margin-top:15px;
}
.navbar-brand{
text-indent:-999px;
max-width:234px;
width:100%;
height:auto;
}
.nav > li {
display: block;
position: static;
margin: 0 25px 0 0;
}
.subscribe-input, .form-control:focus{
box-shadow:none;
border-color:#tmcDarkblue;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar {
text-align: center;
margin-bottom:8px;
border-bottom:none;
border-top:0px;
border-radius:0px;
border-left:0px;
border-right:0px;
border-top:0px;
}
.mobileNav{
margin-left: 0px;
margin-right: 0px;
display:block;
height:100%;
}
.modeSelector{
right:57px;
}
.dropdown a{
text-decoration:none;
}
.navbar .hover-dropdown li a:hover {
text-decoration:none;
color:#tmcLightblue;
}
.dropdown-menu{
width:100%;
text-align:center;
box-shadow:none;
border:none;
border-radius:0;
}
.mainDropdown{
margin-top:-1px !important;
}
.modes{
border:1px solid #tmcDarkblue;
border-radius:0px;
text-align:left;
}
.modes li a{
color:#tmcDarkblue;
}
.modes li a:hover{
color:#tmcLightblue;
}
.user-input, .pass-input{
width:41.5%;
float:left;
}
.search-input{
width:82%;
}
.subscribe-input, .form-control{
border-radius:0px;
border-color:#tmcDarkblue;
color:#tmcDarkgrey;
float:left;
margin-right:4px;
}
.glyphicon-arrow-right{
color:#c05d1a;
}
.glyphicon-search{
color:#c05d1a;
}
.logo, .search-wrapper {
padding-top:39px
}
#navbar-collapse-2, #navbar-collapse-1{
position: static;
width: 100%;
z-index: 2147483647;
}
.nav > li.dropdown{
/*border-bottom:2px solid #fff;*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
color:#tmcLightblue;
background-color:none;
background:none;
border-bottom:2px solid #tmcDarkblue;
font-weight:bold;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
color:#tmcLightblue;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: transparent !important;
color: #tmcLightblue;
}
.navbar-nav > li > a{
border-bottom:2px solid #fff;
}
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
background-color: #fff;
border-color: #tmcOrange;
color: #fff;
}
.glyphicon .glyphicon-search:hover {
color: #fff;
}
/********* HEADLINES *********/
.headlineBorder{
display:inline;
text-transform:uppercase;
font-size:20px;
/*border-bottom:3px solid #tmcGreen;*/
}
.headlineBorderblue{
display:inline;
text-transform:uppercase;
/*border-bottom:3px solid #tmcDarkblue;*/
}
.headlineBorderwhite{
display:inline;
text-transform:uppercase;
/*border-bottom:3px solid #fff;*/
color:#fff;
}
.headlineBorderwhite_small {
font-size: 22px;
margin: 0 0 5px;
}
.headlineList{
margin-bottom:15px;
}
.btn-blue{
border-color:#tmcLightblue;
}
.btn-blue:hover, .btn-blue:active, .btn-blue:focus{
background-color:#tmcDarkblue;
border-color:#fff;
}
.glyphicon-menu-right:hover{
color:#fff !important;
}
.headlineGlyph:hover{
color:#tmcLightblue !important;
}
.btn-mobile-right {
border:none;
}
.btn-mobile-right:hover, .btn-mobile-right:focus, .btn-mobile-right.focus, .btn-mobile-right:active, .btn-mobile-right.active, .open > .dropdown-toggle.btn-default {
background-color: transparent;
}
.glyphicon-menu-right, .glyphicon-menu-left{
/*color:#tmcLightblue;*/
}
.glyphicon-menu-right:hover, .glyphicon-menu-left:hover{
color:#fff;
}
.fourXfour{
margin-bottom: 50px;
}
/********** SIDEBAR STYLES ***********/
.sidebarImg{
margin:15px;
}
.sidebarImg > a {
display: block;
}
.caption{
margin-top:30px;
padding-left:15px;
padding-right:15px;
}
.caption > h4{
font-weight:bold;
line-height:12px;
}
/*********** CONTACT PAGE STYLES ***********/
.pageIntroheadline > ul.contactList li a{
color:#fff;
}
.fourXfour > ul.contactList li a{
color:#tmcLightblue;
}
.contactList{
margin-top:15px;
}
#myMap{
background:url('../images/worldMap.jpg');
background-repeat: no-repeat;
background-size:contain;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
}
.mapDescriptionwrapper{
display:block;
margin:-5px 0 0;
z-index:1;
}
.mapTitle{
background:#tmcLightblue;
padding:5px 8px;
border:1px solid #fff;
display:inline-block;
width:auto;
text-align:center;
color:#fff;
z-index:10;
}
.mapTitle:hover{
display:block;
background:orange;
display:inline-block;
}
.mapDescription{
display:none;
}
#description-box{
background-color: #tmcLightblue;
border: 1px solid white;
}
/********* INSIDE PAGE HERO IMAGE ************/
.insidePagehero {
display: block;
height: auto;
max-width: 960px;
min-height: 232px;
min-width: 392px;
width: 100%;
}
.halfHero{
padding:0;
}
.insideHerocolorPicker-orange{
background:#tmcOrange;
}
.insideHerocolorPicker-darkBlue{
background:#tmcDarkblue;
}
.insideHerocolorPicker-lightBlue{
background:#tmcLightblue;
}
.insideHerocolorPicker-green{
background:#tmcGreen;
}
.pageIntroheadline{
display: block;
color:#fff;
margin-top:5%;
margin-bottom:0;
}
.pageHero {
padding:0 15px 0 0;
}
/********* HOMEPAGE MARKETING AREA *********/
.marketing-wrapper{
margin-top:50px;
margin-bottom:50px;
}
.mareting-section{
padding:0;
}
/************************* FLIPPING STYLES *******************/
.marketing-wrapper h2{
margin-bottom:20px;
}
.flipperWrap{
padding:0;
}
.card {
width:100%;
max-width: 750.666px;
height: 348px;
margin: 0px;
display: inline-block;
clear:both;
}
.flip {
width:100%;
max-width: 750.666px;
height: 396px;
margin: 0px;
display: inline-block;
clear:both;
margin-bottom:30px;
}
.front, .back {
padding: 0px;
}
.front {
background-color: transparent;
}
.back {
background-color: transparent;
}
.arrowFront{
height:230px !important;
}
.arrowBack{
height:230px !important;
background:#c05d1a url(../images/triangle.jpg) no-repeat bottom right;
}
.blogInside, .tmsInside, .globalInside{
height: 50%;
margin: 2.5% auto;
width: 78%;
}
.flipBack{
color:#fff;
padding: 0px;
}
.flipOrange{
background-color:#tmcOrange;
}
.flipDarkblue{
background-color:#tmcDarkblue;
}
.flipLightblue{
background-color:#tmcLightblue;
}
.flipGreen{
background-color:#tmcGreen;
}
.flipDarkgrey{
background-color:#tmcDarkgrey;
}
.flipLightgrey{
background-color:#tmcLightgrey;
}
.blogIcon{
background:url("../images/blogIcon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 38px;
width: 46px;
float:left;
margin:0 22px 0 0;
}
.tmsIcon{
background:url('../images/tmsIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 38px;
width: 46px;
float:left;
margin:0 22px 0 0;
}
.globalIcon{
background:url('../images/globalIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 38px;
width: 38px;
float:left;
margin:0 22px 0 0;
}
/**************** LEADERSHIP SLIDER STYLES *****************/
.leadershipSlider{
margin-top:30px;
margin-bottom:30px;
}
.leadershipCol {
float: left;
margin-right:15px;
}
.leadershipName, .slider{
color:#fff;
height:auto;
width:82%;
max-width:138px;
background-color:#tmcOrange;
padding:10px;
margin:-85px 0 0 38%;
border:1px solid #fff;
display:block;
float:left;
}
.leadershipName .glyphicon.glyphicon-menu-right.pull-right{
color:#fff;
margin:-8px 0;
}
.leadershipImg{
display:block;
float:left
}
/**************** Client Results Page *******************/
.introText{
padding:0;
}
.clientResultsGrid{
margin-top:30px;
margin-bottom:30px;
}
.panel-default{
padding:0;
border:none;
}
.panel-default > .panel-heading{
border:none;
color:#tmcDarkblue;
background:#fff;
}
.panel{
box-shadow:none;
}
.panel-body{
background:#tmcLightgrey;
padding: 15px 0;
}
.panelResults{
margin-bottom:15px;
}
.panel-heading{
padding: 0;
background:#tmcLightblue;
border-radius:0px;
margin-bottom:5px;
}
.panel-title{
color:#fff;
padding: 15px 0;
font-weight: bold;
text-transform: uppercase;
}
.accordionResults{
padding: 0;
}
.accordionIcon{
color: #fff;
display: inline-block;
font-size: 33px;
min-width: 50px;
padding: 7.5px 0;
text-align: center;
}
.resultsIcon{
padding: 0 0.5%;
width:auto;
border-right:2px solid #fff;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.resultsTitle{}
.glyphBox{
background: none repeat scroll 0 0 #c0c920;
display: inline-block;
height: auto;
margin: 15px 0 25px;
min-height: 32px;
min-width: 42px;
padding: 4px;
text-align: center;
}
a.glyphBox:hover, a.glyphBox:focus{
color:#tmcGreen;
text-decoration:none;
outline:nonne;
outline-offset:0px;
}
.glyphBox .indicator{
color:#fff;
vertical-align:middle;
}
.preResultsaccordion {
padding:0;
}
.preResultsaccordion > .inside{
padding:0;
margin:15px 0;
}
#collapseOne, #collapseTwo, #collapseThree, #collapseFour{
padding:0;
}
#media (max-width:#screen-lg) {
}
#media (max-width:#screen-md) {
.navbar-nav > li > a {
border-bottom: 0px solid #fff;
}
.modeSelector{
right:0px;
}
.search-input{
width:78%;
}
.user-input, .pass-input{
width:37%;
}
}
#media (max-width:#screen-sm) {
/*FEEDSLIDER*/
.headlineWrapper, .headlineWrapper-green, .headlineWrapper-white{
width:80%;
}
.mobile{
color:#fff;
}
.headlineHero{
font-size:medium;
}
.secondaryNavigation-wrapper{
background:#tmcDarkblue;
padding: 15px 0 0;
}
.secondaryNavigation-mobile{
color:#fff;
list-style:none;
padding-bottom: 0px;
padding-left:0;
padding-right:0;
margin: 0 auto;
width:47%;
}
.secondaryNavigation-mobile a{
color:#fff;
}
.secondaryNavigation-mobile a:hover{
color:#tmcLightblue;
}
ul.secondaryNavigation-mobile li{
list-style:none;
width:47%;
display:inline-block;
margin-bottom:0px;
margin-right:3px;
padding-bottom:0;
padding-left:0;
padding-right:0;
vertical-align: top;
padding-bottom:15px;
}
.navbar-toggle{
font-size:medium;
}
.navbar-collapse{
background-color: rgba(0,58,99,0.80);
}
.navbar-nav{
margin:15px -15px;
}
.nav > li > a{
text-align:left;
padding-left:0px;
padding-right:0px;
color:#fff !important;
}
.nav > li > a:hover{
color:#tmcLightblue !important;
}
.nav > li{
margin:0px;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
border-bottom:0px solid transparent;
color:#tmcLightblue !important;
}
.navbar-brand{
max-width:125px;
margin:0 0 0 5px;
}
#navbar-collapse-2, #navbar-collapse-1{
position: absolute;
width: 100%;
z-index: 2147483647;
}
.subscribe-input{
border-radius:0px;
border-color:#tmcDarkblue;
color:#tmcDarkgrey;
float:left;
margin-right:4px;
}
.search-form{
background-color:transparent !important;
color:#fff;
}
.mobileSearch-btn{
border-color: #fff;
background-color:transparent;
}
.mobileSearch-btn:hover{
border-color: #fff;
background-color:transparent;
}
.glyphicon-search {
color: #fff;
}
.glyphicon-arrow-right{
color: #fff;
}
.mobileLogin{
text-align:left;
}
.login-control{
float:none;
}
.user-input, .pass-input{
margin:0 0 5px 0;
width:100%;
float:none;
}
.dropdown-menu{
text-align:left;
}
.mobileDropdown{
background-color: transparent !important;
border: 1px solid #fff !important;
color: #fff;
margin: 5px 0 0;
padding: 6px 13px;
display: block;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
background-color: #fff;
padding: 5px 0;
}
.mobileList{
background-color: #fff !important;
border-radius: 0;
padding: 0;
}
.navbar-nav .open .mobileList{
position:absolute;
width:100%;
}
.mobileList li{
padding:4px 14px;
border-bottom:1px solid #tmcDarkblue;
}
.mobileNav{
margin-left: 0px;
margin-right: 0px;
}
}

What you want is the .dropdown-menu and .sub-menu classes.
To change the height of the menu try this:
.dropdown-menu
{
max-height: 400px;
}

How would you switch focus to an input text upon clicking an item on a dropdown menu?

I have a website that has a dropdown menu and an input box. For user comfort, I am thinking it would be nice to have it so that when the user clicks on an option in the dropdown menu, the mouse cursor is immediately focused inside the input box so that they can begin typing right away, rather than having to click into it every time.
How can this be achieved?
Here is my Jsfiddle: http://jsfiddle.net/mlynn/jyrbepyz/3/
Thank you.
HTML
<section id="heady">
<div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b>Site</b></p></div>
<div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">
Home |
Generic |
Elements |
Sign Up
</div>
</section>
<section id="wrapper">
<br><br>
<img src="images/blacksquare.png" width="525" height="197"></img>
<br><br><br>
<div>
<div style="vertical-align:top;display:inline-block;float:left;">
<ul class="navbar cf">
<!-- <li>item 2</li> -->
<li style="width:200px;">
#
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</li>
</ul>
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" id="todo" placeholder="Enter a To-do and hit enter">
</form>
<br>
<!-- <ul class="active">
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
</ul> -->
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<ul class="active">
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
</ul>
</div>
</div>
<div class="Category1">
<!--list items that user assigned "1" from dropdown menu would be placed in this div-->
</div>
<div class="Category2">
</div>
<div class="Category3">
</div>
<div class="Category4">
</div>
<div class="Category5">
</div>
<div class="Category6">
</div>
<div class="Category7">
</div>
</section>
<section id="feety">
I believe I exist
</section>
CSS
/*adder*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding:0;
margin:0;
}
html {
background:teal;
}
body {
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #D9D9D9;
text-decoration: none;
}
a:active, a:hover {
text-decoration: underline;
}
#heady {
text-align: center;
width:100%;
height:75px;
background-color:#222; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
#wrapper {
text-align: center;
width:1000px;
height:1000px;
margin-left:auto;
margin-right:auto;
background-color:teal; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
position:relative;
}
#feety {
text-align: center;
width:100%;
height:100px;
background-color:darkslateblue; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
.Category1 {
background:blue;
}
.Category2 {
background:green;
}
.Category3 {
background:yellow;
}
.Category4 {
background:orange;
}
.Category5 {
background:purple;
}
.Category6 {
background:gold;
}
.Category7 {
background:maroon;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
background:white;
border-style:solid;
border-color:gray;
border-width:1px;
width: 200px;
border-radius: 4px;
}
.ActiveListItem:after {
content: "\25BC\00a0\00a0"; /*carat and spaces*/
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px; /*keeps carat in center of text*/
}
ul.navbar li a.ActiveListItem {
background:white !important;
color:black;
border-style:solid;
border-color:white;
border-radius:4px;
padding:3px 5px !important;
font-weight:normal !important;
margin-left:14px;/* got the activeitem centered with the list text this way*/
margin-right:0px;
}
ul.navbar li {
position: relative;
}
ul.navbar li a {
display: block;
color: white;
padding:10px 5px;
text-decoration:none;
transition: all .2s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
background:#a6d0e1; /*Leaving for now, but keep in mind things bold slowly when you change this to gradient*/
color: #333;
font-weight:900;
}
ul.navbar li ul {
margin-top: 1px;
position: absolute;
background: #222;
font-size: 14px;
min-width: 200px;
display: none;
z-index: 99;
box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
}
ol, ul { list-style: outside none none; }
.hidden { display: none; }
/*Lister*/
.container {
width: 60%;
margin: 0px auto;
}
form { }
input,
ul {
background: #eee;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
font-family:"Tahoma";
}
input {
padding: 10px 10px 10px 20px;
border: 1px solid #ccc;
}
.lister ul {
list-style: square inside;
padding: 10px;
}
.active { border: 1px solid #ccc; }
.inactive { display: none; }
.lister li {
padding: 10px;
font-weight: 600;
color: #34495e;
}
.lister li:nth-child(odd) {
background: #dadfe1;
border-radius: 5px;
}
.lister li > a {
float: right;
text-decoration: none;
color: #22313f;
font-weight: bold;
transition: all .2s ease-in-out;
}
.lister li > a:hover {
font-size: 110%;
color: #c0392b;
}
.lister li:before {
content: "#"; /*carat and spaces*/
float:left;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px; /*keeps carat in center of text*/
}
JS
// sub menus identification
$(function() {
$('.navbar ul li a').click(function(){
$('.navbar > li:first-child > a').text($(this).text());
$('.navbar > li > ul').addClass('hidden');
$('.navbar li ul').slideToggle(100);
});
$('.navbar > li').mouseenter(function(){
$(this).find('ul').removeClass('hidden');
});
$('.ActiveListItem').click(function(){
$('.navbar li ul').slideToggle(300);
});
});
//newList
$(document).ready(function() {
var ul = $('.lister ul'),
input = $('input');
input.focus();
$('form').submit(function () {
if (input.val() !== '') {
var inputVal = input.val(),
activeNumber = $('.ActiveListItem').text();
if (activeNumber == "1") {
/*I guess the fantasy code goes here...?*/
}
ul.append('<li>' + activeNumber + ' ' +inputVal + 'X</li>');
if (ul.hasClass('inactive')) {
ul.removeClass('inactive')
.addClass('active');
}
};
input.val('');
return false;
});
ul.on('click', 'a', function (e) {
e.preventDefault();
$(this).parent().remove();
if (ul.children().length == 0) {
ul.removeClass('active')
.addClass('inactive');
input.focus();
}
});
});

You're using var ul = $('.lister ul')
Go take a look where is your .lister and the child ul in your HTML
I mean you probably want to target the needed DROPDOWN UL anchors
using the right selector:
$(".navbar.cf li ul li").on("click", "a", function(e){
e.preventDefault();
input.focus();
});
http://jsfiddle.net/jyrbepyz/5/

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>