We Keep Coding

Horizontal Toggle Dropdown

I'm trying to create a horizontal dropdown (err.. dropside?).
When clicked, it expands to the right to show more options, and the user can click the option they want.
I have found this JsFiddle but it is implemented using ul and li, not select and option. Does this really matter for the purposes of clicking a menu item and dispatching an action? It also expands on hover, not on click. And when a menu item is clicked, I need the menu to stay open until the 'X' on the left is clicked. If anyone could help me start on this it would be much appreciated.
Here's an image of what I'm trying to do

Try something like this:
[...document.getElementsByClassName("item")].forEach(i => i.addEventListener("click", function(e) {
e.stopPropagation();
console.log(this);
}));
document.getElementById("open-button").addEventListener("click", function() {
this.parentElement.classList.add("open");
});
document.getElementById("close-button").addEventListener("click", function() {
this.parentElement.classList.remove("open");
});
body {
background: black;
}
.menu {
background: white;
border-radius: 17px;
height: 34px;
width: 100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
}
.menu .item {
display: none;
color: grey;
}
.menu #open-button {
display: block;
}
.menu #close-button {
display: none;
color: grey;
}
.menu.open {
justify-content: space-around;
width: 300px;
}
.menu.open .item {
display: block;
}
.menu.open .item:hover {
color: black;
}
.menu.open #close-button {
display: block;
}
.menu.open #close-button:hover {
color: black;
}
.menu.open #open-button {
display: none;
}
<div class="menu">
<div id="open-button">Menu</div>
<div id="close-button">✕</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div>

if you for some reason have to use select and option in your markup here's how to do it, but it's a lot of work https://www.w3schools.com/howto/howto_custom_select.asp
or you can do something like this:
var btnToggle = document.querySelector(".js-toggle");
btnToggle.addEventListener("click", handleMenu);
function handleMenu() {
var menu = document.querySelector(".js-menu");
if ( menu.classList.contains("is-showing") )
{
menu.classList.remove("is-showing");
}
else
{
menu.classList.add("is-showing");
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #333;
}
.navigation {
background: #fff;
border-radius: 9999px;
display: inline-flex;
align-items: center;
padding: 20px;
}
.menu {
list-style: none;
padding-left: 22px;
margin: auto;
display: none;
}
.menu.is-showing {
display: inline-flex;
}
.menu__item {
background: #fff;
}
.box {
display: block;
background: #999;
width: 60px;
height: 60px;
margin: 0 22px;
}
.box:hover {
background: #498cdf;
}
.toggle {
padding: 0;
background: #e7e7e7;
border: none;
width: 60px;
height: 60px;
}
<div class="navigation">
<button class="toggle js-toggle">x</button>
<ul class="menu js-menu">
<li class="menu__item">
<span class="box"></span>
</li>
<li class="menu__item">
<span class="box"></span>
</li>
<li class="menu__item">
<span class="box"></span>
</li>
<li class="menu__item">
<span class="box"></span>
</li>
<li class="menu__item">
<span class="box"></span>
</li>
<li class="menu__item">
<span class="box"></span>
</li>
<li class="menu__item">
<span class="box"></span>
</li>
<li class="menu__item">
<span class="box"></span>
</li>
</ul>
</div>

Try this
<nav>
<a class="nav-btn">Logo</a>
<ul>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
</ul>
</nav>
a, li {
display: block;
width: 100px;
height: 100px;
background-color: red;
float: left;
border: 1px solid yellow;
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
display: none;
}
.expand{
display: block;
}
$("nav .nav-btn").click(function(){
$("nav ul").toggleClass("expand");
});
a, li {
display: block;
width: 100px;
height: 100px;
background-color: red;
float: left;
border: 1px solid yellow;
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
display: none;
}
.expand{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<a class="nav-btn">Logo</a>
<ul>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
</ul>
</nav>

Element width to match horizontal position of other element

Let's say we have a navigation div which contains elements. Below navigation div there is some bar that must expand to the width where it matches one of the navigation elements (3rd one in this case).
<div id="main_navigator">
<div id="main_navigator_upper">
<a id="main_navigator_logo" src="/"></a>
<ul id="main_navigator_r1">
<li>
<a class="main_nav_btn">BTN 1</a>
</li>
<li>
<a class="main_nav_btn">BTN 2</a>
</li>
<li>
<a class="main_nav_btn">BTN 3</a>
</li>
<li>
<a class="main_nav_btn">BTN 4</a>
</li>
<li id="main_navigator_l1">
<div id="main_navigator_s1"></div>
</li>
<li>
<ul id="main_navigator_regbox">
<li>
<p id="regbox_signin">sign in</p>
</li>
<li>
<div id="main_navigator_regbox_s1"></div>
</li>
<li>
<a id="regbox_signup" href="sign_up">sign up</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="main_navigator_bottom">
<div id="main_navigator_progression"></div>
</div>
</div>
From this code, main_navigator_progression div must expand its width so it matches BTN 3.
You can see the concept here.
I've written a simple JS code, but it doesn't seem to be neat and doesn't always work:
function initializeProgressorPos() {
document.getElementById("main_navigator_progression").setAttribute("style", ("width: " + (document.getElementsByClassName("main_nav_btn")[2].getBoundingClientRect().x - document.getElementsByClassName("main_nav_btn")[2].getBoundingClientRect().width) + "px"))
}
initializeProgressorPos();
$(window).resize(function() {
initializeProgressorPos();
});
Is there any way to create such a function that works even when browser is scaled? What could be wrong with my code? Is there any chance that this can be done with pure css?

As you have floatted the element to the right, first you have to get the width of document, then exclude the width from left of document to the right of element from that amount:
function initializeProgressorPos() {
var elementRight=$(document).width()- $('.main_nav_btn:eq(2)').offset().left - $('.main_nav_btn:eq(2)').width();
$("#main_navigator_progression").css({"width": elementRight + "px"});
}
initializeProgressorPos();
$(window).resize(function() {
initializeProgressorPos();
});
body {
margin: 0;
overflow-y: scroll;
}
#main_navigator {
position: fixed;
background-color: black;
width: 100%;
}
#main_navigator_upper {
position: relative;
display: flex;
flex-direction: row;
}
#main_navigator_logo {
width: 416px;
height: 120px;
background-color: white;
}
#main_navigator_r1 {
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
flex-shrink: 1;
padding: 0;
padding-right: 5%;
text-align: center;
margin-top: 0px;
height: 98px;
list-style-type: none;
}
#main_navigator_r1 li {
flex-grow: 1;
flex-shrink: 1;
/* flex-basis: 0; */
flex-basis: auto; /* new */
}
#main_navigator_l1 {
flex-grow: 0.1 !important;
}
#main_navigator_r1 li .main_nav_btn {
color: white;
display: block;
height: 100%;
font-family: "nexa_bold";
font-size: 0.9em;
text-decoration: none;
}
#main_navigator_s1 {
display: inline-block;
width: 2px;
height: 35px;
background-color: #B28039;
}
#main_navigator_regbox {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#main_navigator_regbox li {
display: inline-block;
flex-grow: 0.1;
flex-shrink: 0.1;
}
#regbox_signin {
display: block;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
color: #B28039;
font-size: 0.9em;
font-family: "nexa_light";
}
#regbox_signup {
display: block;
white-space: nowrap;
text-decoration: none;
color: white;
font-size: 0.9em;
font-family: "nexa_light";
}
#main_navigator_regbox_s1 {
display: inline-block;
width: 1.4px;
height: 13.5px;
background-color: white;
}
#main_navigator_bottom {
background-color: black;
height: 24px;
}
#main_navigator_progression {
position: relative;
background-color: #B28039;
height: 100%;
width: 416px;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<body>
<div id="main_navigator">
<div id="main_navigator_upper">
<a id="main_navigator_logo" src="/"></a>
<ul id="main_navigator_r1">
<li>
<a class="main_nav_btn">BTN 1</a>
</li>
<li>
<a class="main_nav_btn">BTN 2</a>
</li>
<li>
<a class="main_nav_btn">BTN 3</a>
</li>
<li>
<a class="main_nav_btn">BTN 4</a>
</li>
<li id="main_navigator_l1">
<div id="main_navigator_s1"></div>
</li>
<li>
<ul id="main_navigator_regbox">
<li>
<p id="regbox_signin">sign in</p>
</li>
<li>
<div id="main_navigator_regbox_s1"></div>
</li>
<li>
<a id="regbox_signup" href="sign_up">sign up</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="main_navigator_bottom">
<div id="main_navigator_progression"></div>
</div>
</div>
</body>
</html>

This is a proof of concept.
You can use a combination of a custom HTML5 data-* attribute and an ::after pseudo-element on your navigation menu (and a dash of javascript) to indicate which menu item you have most recently selected.
Despite the dash of javascript, most of the work is done using CSS.
Working Example:
var menu = document.querySelector('nav ul');
var menuItems = [... menu.getElementsByTagName('li')];
function selectMenu() {
menu.dataset.selectedMenu = (menuItems.indexOf(this) + 1);
}
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', selectMenu, false);
}
nav ul {
display: flex;
position: relative;
margin: 0;
padding: 0;
}
nav li {
flex: 0 0 60px;
padding: 12px 12px 24px;
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
list-style-type: none;
cursor: pointer;
}
nav ul::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 12px;
background-color: rgba(0, 0, 0, 0.5);
transition: width 0.6s linear;
}
nav ul[data-selected-menu="1"]::after {
width: 80px;
}
nav ul[data-selected-menu="2"]::after {
width: 160px;
}
nav ul[data-selected-menu="3"]::after {
width: 240px;
}
nav ul[data-selected-menu="4"]::after {
width: 320px;
}
nav ul[data-selected-menu="5"]::after {
width: 400px;
}
<nav>
<ul data-selected-menu="1">
<li class="active">Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>

Is it possible to create a drop down with multiple columns (like mega menu) using html css and jquery without using any plugins?

I have to create a drop down with two columns just like the image It should be like when i click on the drop down menu it should display like this so far i am not successful!. This is the sample code i am working with.. if i execute this code it is no where what i am expecting and also i am new to coding.
$(document).ready(function() {
// NAV TOGGLE ONCLICK WITH SLIDE
$(".clickSlide ul").hide();
$(".clickSlide").click(function() {
$(this).children("ul").stop(true, true).slideToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONCLICK WITH FADE
$(".clickFade ul").hide();
$(".clickFade").click(function() {
$(this).children("ul").stop(true, true).fadeToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONHOVER WITH SLIDE
$(".hoverSlide ul").hide();
$(".hoverSlide").hover(function() {
$(this).children("ul").stop(true, true).slideToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONHOVER WITH FADE
$(".hoverFade ul").hide();
$(".hoverFade").hover(function() {
$(this).children("ul").stop(true, true).fadeToggle("fast"),
$(this).toggleClass("dropdown-active");
});
});
/**/
#navbar {
width: 100%;
padding: 10 10 10 10;
}
#dropdown1 {
width: 960px;
margin: 0 auto;
padding: 0;
height: 1em;
font-weight: bold;
}
#dropdown1 li {
list-style: none;
float: left;
}
#dropdown1 li a {
padding: 0px 0px 0px 5px;
text-decoration: none;
}
#dropdown1 li ul {
display: none;
background-color: #fff;
}
#dropdown1 li:hover ul,
#navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#dropdown1 li:hover li,
#navbar li.hover li {
float: left;
}
#dropdown1 li:hover li a,
#navbar li.hover li a {
background-color: #fff;
color: #000;
}
.topnav a {
color: #000;
text-decoration: none;
}
.topnav a:hover {
border-bottom: 1px solid gold;
}
.column {
display: inline-block;
list-style-type: none;
float: left;
margin: 5px 0 0 0;
padding: 0 5px 0 0;
width: 500px !important;
}
.column li {
float: left;
display: inline;
}
.column a {
color: #999;
text-decoration: none;
font-size: .7em;
}
.column a:hover {
border-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<ul id=dropdown1>
<li class="topnav">
<div class="column">
Services <span>▼</span>
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
<div class="column">
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
</ul>
</div>

if i understood properly,
This jsfiddle maybe helpful
looks like u use two div but have same class name, then with your css only set "column" .
so the two div will display in same position, that's why u have two div but only display one.
<div class="navbar">
<ul id=dropdown1>
<li class="topnav">
<div class="column">
Services <span>▼</span>
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
<div class="column2">
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
</ul>
then you should set column2's css
UPDATE:
this fiddle
look this fiddle above
i change the li and set
.column a:after{
content:"\a";
white-space: pre;
}
\a means line break, character U+000A, and white-space: pre tells browsers to treat it as a line break in rendering.
found answer here Line break (like <br>) using only css

I have developed drop-down as per your image, without using any plugin.
I am using:
HTML
CSS
Explaination:
I am using table tag to design multiple columns.
<table>
<tr>
<td></td>// for left-col links
<td></td>// for right-col links
</tr>
</table>
Then inside <td> tag I am using <ul><li></li></ul>tag. Inside <li> you can have multiple links.
Similarly I did for right-side column.
Full Code
CSS code
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.link-format {
list-style-type:none;
width:100px
}
</style>
HTML code
<body>
<h2>Dropdown Menu with multiple columns</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<table>
<tr>
<td>
<ul class="link-format" style="border-right:1px gray dashed">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</td>
<td>
<ul class="link-format">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
Working JsFiddle: https://fiddle.jshell.net/mayankBisht/cvsrqn3r/1/
Hope this helps.
Please reach out to me for more information/help.
Thanks.

How to add a header sub-menu using jQuery on click?

In my page header I have a list of 6 categories and I'd like to add a sub menu for each category, but display it only when category is clicked. (I'd like to use only one handler in my script.js file, not add one for each category in particular. - less code)
Here is my HTML for the list in header:
<ul id="menu">
<li id="menu_item1" class="menu_item">About
<div id="sub-menu1" class=“sub-menu”></div>
</li>
<li id="menu_item2" class="menu_item">Services
<div id="sub-menu2" class=“sub-menu”></div>
</li>
<li id="menu_item3" class="menu_item">Portfolio
<div id="sub-menu3" class=“sub-menu”></div>
</li>
<li id="menu_item4" class="menu_item">Blog
<div id="sub-menu4" class=“sub-menu”></div>
</li>
<li id="menu_item5" class="menu_item">Pictures
<div id="sub-menu5" class=“sub-menu”></div>
</li>
<li id="menu_item6" class="menu_item">Contacts
<div id="sub-menu6" class=“sub-menu”></div>
</li>
</ul>
This is the SCSS:
#menu {
position: absolute;
right: 25px;
top: 25px;
.menu_item {
position:relative;
font-family: $OpenSansSemibold;
font-size: 14px;
color: #fff;
text-transform: uppercase;
list-style-type: none;
display: inline-block;
padding: 8px 16px;
div.sub-menu {
position:absolute;
top:40px;
left: 0;
width: 200px;
height: 116px;
border: 1px solid green;
background-image: url(../img/popupmenu_03.png);
display: none;
}
&:hover{
background: #62a29e;
border-radius: 5px;
border-bottom: 5px solid #528b86;
cursor: pointer;
}
}
}
And here is what I tried so far, but it doesn't work:
$( ".menu_item" ).each(function() {
$(this).children().find(".sub-menu").toggle();
});
Any help would be much appreciated, thank you!

Just remove the .children() and it should work. .children() accesses direct children already, while .find() will traverse down the DOM tree from that element. So in your code, you were looking for any child (grandchild, etc) of direct children of .menu_item that was clicked. .sub-menu wasn't a child of direct children of .menu_item, but was rather already that element ;) I am using the .find() method here because it'll still work, even if your DOM changes. If you won't change anything in regards to your DOM structure of the menu, you are safe to use $(this).children().toggle();
var $subMenus = $(".menu_item").find(".sub-menu");
$(".menu_item").on("click", function() {
$subMenus.addClass("hidden");
$(this).find(".sub-menu").removeClass("hidden");
});
SCSS:
#menu {
.menu_item {
div.sub-menu {
....
&.hidden {
display: none;
}
}
}
}

Please try this:
jQuery( ".menu_item" ).click(function(e) {
jQuery(this).closest('#menu').find('.sub-menu').filter(':visible').hide(); // hides other open sub-menus
jQuery(this).find(".sub-menu").toggle(); // opens the clicked item's sub-menu
});
#menu {
position: absolute;
right: 25px;
top: 25px;
}
#menu .menu_item {
position: relative;
font-family: 'OpenSansSemibold';
font-size: 14px;
color: #333; /*fff; changed just for display */
text-transform: uppercase;
list-style-type: none;
display: inline-block;
padding: 8px 16px;
}
#menu .menu_item div.sub-menu {
position: absolute;
top: 40px;
left: 0;
width: 200px;
height: 116px;
border: 1px solid green;
background-image: url(../img/popupmenu_03.png);
display: none;
}
#menu .menu_item:hover {
background: #62a29e;
border-radius: 5px;
border-bottom: 5px solid #528b86;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
<li id="menu_item1" class="menu_item">About
<div id="sub-menu1" class="sub-menu"></div>
</li>
<li id="menu_item2" class="menu_item">Services
<div id="sub-menu2" class="sub-menu"></div>
</li>
<li id="menu_item3" class="menu_item">Portfolio
<div id="sub-menu3" class="sub-menu"></div>
</li>
<li id="menu_item4" class="menu_item">Blog
<div id="sub-menu4" class="sub-menu"></div>
</li>
<li id="menu_item5" class="menu_item">Pictures
<div id="sub-menu5" class="sub-menu"></div>
</li>
<li id="menu_item6" class="menu_item">Contacts
<div id="sub-menu6" class="sub-menu"></div>
</li>
</ul>

Responsive menu doesn't close even after browser resize

Here's my code:
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Responsive Menu</title>
<link rel="stylesheet" href="css/colors.css"/>
<link rel="stylesheet" href="css/font-awesome.css"/>
</head>
<body>
<header id="topbar">
<p>Some title</p>
<nav class="menu">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact Me</li>
</ul>
</nav>
<div class="nav-trigger">
<span><i class="fa fa-bars fa-2x"></i></span>
</div>
<nav class="mobile-menu-enabler">
<span></span>
</nav>
</header>
<nav class="mobile-menu">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact Me</li>
</ul>
</nav>
<!-- Begin main sample site content -->
<div id="wrapper">
<p>Lorem ipsum dolor set amet...</p>
</div>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/script.js"></script>
</body>
</html>
CSS:
body {
font-family: "Ludica Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}
p {
margin: 0;
padding: 0;
display: inline-block;
}
header {
margin: 0;
padding: 0;
display: inline-block;
position: absolute;
top: 0;
left: 0;
background-color: azure;
border: 1px solid black;
width: 100%;
}
/* Begin Menu Code */
.menu {
display: inline-block;
float: right;
}
.menu ul {
list-style: none;
margin: 5px 0;
}
.menu ul:last-child {
margin-right: 10px;
}
.menu ul li {
display: inline-block;
margin: 0 2px;
padding: 0;
border: 1px solid black;
}
.menu ul li a {
text-decoration: none;
color: black;
padding: 3px;
}
.menu ul li>:hover {
background-color:black;
color: white;
}
/* End Menu Code */
/* Mobile Menu Begin */
.mobile-menu-enabler {
display: none;
background-color: aqua;
}
.mobile-menu {
display: none;
position: relative;
top: 38px;
width: 100%;
border-top: 1px solid black;
}
.mobile-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-menu ul li {
margin: 0;
padding: 0;
border: 1px solid black;
border-top: 1px solid transparent;
text-align: center;
}
.mobile-menu ul li a {
margin: 0;
padding: 0;
text-decoration: none;
color: black;
}
.mobile-menu ul li:hover {
background-color: darkkhaki;
}
/* Mobile Menu End */
/* Mobile Trigger Button */
.nav-trigger {
display: none;
text-transform: uppercase;
color: black;
background-color: transparent;
margin-right: 10px;
padding: 0;
text-align: center;
}
.nav-trigger:hover {
color: red;
background-color: transparent;
}
/* End Mobile Trigger Button */
/* Dummy wrapper stuff */
#wrapper {
clear: both;
display: inline-block;
position: relative;
}
/* End Dummy wrapper stuff */
#media screen and (max-width: 900px) {
.menu {
display: none;
}
.mobile-menu-enabler {
display: block;
}
.nav-trigger {
display: inline-block;
float: right;
}
/*.mobile-menu {*/
/*display: block;*/
/*}*/
}
JavaScript:
$(document).ready(function(){ // Begin document ready function
var headerHeight = $("#topbar").height();
$(".nav-trigger").click(function() {
$(".mobile-menu").slideToggle(400)
});
$(".mobile-menu").css("top", headerHeight);
$("#wrapper").css("top", headerHeight);
}); // End document ready function
When the page loads I have a top header bar which contains dummy links. When the browser width is shrunk below the breakpoint at 900px the responsive menu kicks in, at this point upon clicking on the "3 bars icon" the dropdown menu appears as expected.
However, if I were to resize the screen back to full size without first closing the drop down menu, it continues to stay even after the browser is fully expanded.
How can I make the drop-down menu to automatically "untoggle" at the point of growing wider than the breakpoint of 900px?
Thanks
EDIT: Screenshots:
Here's how I'd like it to behave:
callmenick.com/lab-demos/10-simple-responsive-navigation
When the mobile navigation is fully expanded, it automatically slides up once the browser window is expanded

Since you're using Javascript to toggle the display when you click that menu bar icon, it pretty much nullifies the 'display' css for .mobile-menu to some extent (since it is changing the style after the css has already loaded). So you'll need to toggle the UL display value (child), and not the .mobile-menu (parent). That way the responsive .mobile-menu css stays in tact... I believe this is what that example site you mentioned does.
<nav class="mobile-menu">
<ul class="mobile-menu-items">
<li>Home</li>
<li>Work</li>
<li>Contact Me</li>
</ul>
</nav>
keep css for .mobile-menu as display: none on large screens, and display:block for smaller. Then for new class ".mobile-menu-items" you can initially set that to display: none, and toggle that with your jQuery:
$('.nav-trigger').click(function(){
$('.mobile-menu-items').slideToggle();
});
Alternatively you could toggle the visibility instead of the display.
$('.nav-trigger').click(function(){
if ( $('.mobile-menu').css('visibility') == 'hidden' )
$('.mobile-menu').css('visibility','visible');
else
$('.mobile-menu').css('visibility','hidden');
});

If you want to actually retract the mobile menu (and not just hide it in CSS) when the window gets too wide, try this :
var $window = $(window), // caching the objects for performance
$mobileMenu = $(".mobile-menu");
$window.resize(function(){
if( $window.width() > 900) $mobileMenu.slideUp();
})

updated.extremely crude example. resize
ul{list-style-type:none;}
#media screen and (min-width: 500px) {
#big li{display:inline-block;width:100px;height:32px;border:1px solid red;}
#small{display:none;}
}
#media screen and (max-width: 500px) {
#big{display:none;}
#small{display:block;}
.smaller{display:none;}
#small li:hover~ul{display:block}
.smaller:hover{display:block;}
}
<ul id="big">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul id="small">
<li>home1</li>
<ul class="smaller">
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
<li>home2</li><ul class="smaller">
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
</ul>