We Keep Coding

Scale content with size of menu

I was trying something out as a test but didn't quite know how to program it the right way. I was hoping someone could help me out with that.
I made a sketch so it would be a little more clear about what I want to achieve. The menu on the left needs to stay in that exact position.
Let's say the content next to the menu would be smaller than the menu itself. Then the green sections would go underneath the menu. This is not what I want to achieve. I was thinking about scaling the height of the content with Javascript if the content element is too small.
Do you feel like this is the right way to accomplish the desired result? Or could you suggest a better/cleaner way to accomplish this? (An example on jsfiddle would be great)
Thanks in advance!
Edit: I would also like to inform that the menu's height needs to be dynamic. For example what if I add an extra menu item.

You mean something like this?
Just be wary this Only works on MODERN browsers as I am using the checkbox hack :)
Here is a code snipet
*{
box-sizing:border-box;
margin:0px;
padding:0px;
}
#head{
background-color:#000;
border-bottom:#333 solid 1px;
display:block;
padding:10px 0px 0px 10px;
}
#head ul{
background-color:#f00;
display:block;
width:150px;
position:relative;
list-style:none;
margin:0px;
text-align:center;
}
#head li{
display:none;
}
#head input{
display:none;
}
#head input:checked ~ li{
display:block;
}
#head input:checked ~ label{
background-color:#511;
color:#fff;
}
#head label{
font-family:Constantia;
width:100%;
padding:10px 0px;
color:#333;
border-bottom:#111 dotted 1px;
display:block;
font-weight:bold;
text-transform:uppercase;
}
#head label:hover{
background-color:#511;
color:#fff;
cursor:pointer;
}
#head a:link{
background-color:#f00;
width:150px;
display:block;
color:#111;
text-decoration:none;
border-bottom:#333 solid 1px;
padding:10px;
float:left;
margin-right:10px;
}
#head a:visited{
color:#111;
}
#head a:hover{
background-color:#911;
color:#fff;
border-bottom:#211 solid 1px;
font-weight:bold;
}
#body{
padding:10px;
}
<div id="head">
<ul>
<input type="checkbox" id="menu" />
<label for="menu">Menu</label>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div id="body">
<h1>Content</h1>
<p> All my content sits here what am I suppose to do?</p>
</div>
By making use of floats rather than position absolute lets the browser know there is suppose to be content under the header if I had to change it to apply position absolute it would still go out the header but won't take up any space therfore the content wont shift next to or under it but rather behind the navigation.
You should see that the content will go below it when the window gets smaller if you wish to make the content not be squashed up a bit before going underneath the navigation is to set a min-width to the #body{} tag.

Width issue with website dropdown menu

So ive just started the master page for my new site and i put in a dropdown menu which i tested out by dropping it from the home button. Image below:
http://prntscr.com/28qnk2
My problem occurs when i tried to apply the same code to my plugins button in the menu, the whole thing spaces out. Image below:
http://prntscr.com/28qpky
This is the first time ive tried to build in a dropdown menu so my initial attempts probably have some issues with them but i cant seem to get this to work. Here is the code for the menu (html).
<div id="menu">
<table id="menu_table">
<tr>
<td id="home" class="menu_item" style="position:relative; z-index: 1000">
<ul class="dropdown">
<li><p>Home</p>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</li>
</ul>
</td>
<td id="about_us" class="menu_item">About Us</td>
<td id="plugins" class="menu_item">
<ul class="dropdown">
<li><p>Plugins</p>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</li>
</ul>
</td>
<td id="tutorials" class="menu_item">Tutorials and Help</td>
<td id="staff" class="menu_item">Staff</td>
<td id="chat" class="menu_item">ChatRoom</td>
</tr>
</table>
</div>
and here is the CSS for the menu:
#menu {
position:relative;
float:right;
margin:2px;
margin-right:13%;
width:52%;
height:77px;
}
#menu_table{
position:relative;
top:12%;
height:76%;
width:100%;
border-spacing:0px;
}
.menu_item:first-child{
border-left:1px solid #40d7bc;
}
.menu_item:hover{
background-color: black;
color:#40d7bc;
}
.menu_item{
border-right:1px solid #40d7bc;
text-align:center;
}
ul.dropdown li ul {
display:none;
position:absolute;
z-index:100;
padding-left:50%;
top:35px;
width:100%;
}
ul.dropdown li ul li {
position:relative;
border-top:30px solid black;
left:-50%;
background-color: black;
}
ul.dropdown li ul li:last-child {
border-bottom:15px solid black;
}
.menu_item li {
list-style-type: none;
}
and finally the small bit of jQuery i used.
function() {
$('ul', this).stop(true, true).slideToggle(100); },
function() {
$('ul', this).stop(true, true).slideToggle(100); }
);
Thanks for any help on this, im completely lost on whats wrong with it.
The only idea i may have with what the issue is, is how i aligned the text to the center. I did it by padding the ul containing the submenus by 50% width, this way the left side of the ul was down the middle and when i shifted the submenu items left by 50% width they were in the middle. You're probably thinking why shift them at all, well for some reason if i left them in the middle it covered up part of the borders on the menu, screenshot:
www.prntscr.com/28qwvv
If I'm being an idiot and my question is stupid please feel free to point it out as long as you give me a reason

I noticed that you are applying an inline style position relative to your home TD.. Remove the inline style and add this to your css.
.menu_item {
position: relative;
}
This should do the trick. Relative elements will contain absolute elements, and it appears that you are not containing it to the plugin width. See my comments above.

Navigation menu disappears in landscape mode if the user clicks the toggle button in portrait mode in my responsive website

I created a collapsed menu for a responsive website.
When the site is viewed in a browser whose width is less than 960px, the navigation menu items are stacked and hidden. The user needs to click a toggle button to reveal the navigation items. When the browser width is more than 960px, the navigation menu items are displayed in a line.
My problem happens when the user browse the site on a iPad. If the user first open the site on a iPad in portrait mode (width < 960px) and clicks toggle button to reveal the navigation menu and then clicks the toggle button again to hide the navigation menu. Now if the user rotates his iPad to landscape mode (width > 960px), the navigation menu disappears.
But if the user opens the site on a iPad in portrait mode and then rotates it to landscape mode without clicking the toggle button, the navigation menu is available in landscape mode.
The following is the javascript code I wrote to hide and reveal the navigation menu:
$(document).ready(function() {
// Get the handlers
var collapseBtn = $('#nav-collapse');
var mainNav = $('#main-nav');
// Navigation menus only collapse when they are not floated
var isFloated = mainNav.children('li').css('float');
if (isFloated != 'left') {
// Add toggle button click event listener
collapseBtn.on('click', function() {
mainNav.slideToggle();
});
}
});
The following is the html code:
<nav class="col-lg-12">
<a class="nav-collapse" id="nav-collapse">Menu</a>
<ul class="clearfix" id="main-nav">
<li>home</li>
<li>
Item 1
<ul>
<li>Item 1</li>
<li><a href="#"Item 1</a></li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>
Item 1
<ul>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</li>
<li>Item 1</li>
</ul>
</nav>
The following is the css code:
/* toggle button */
#nav-collapse {
display:block;
margin:0 auto;
padding:5px;
background-color:#CDD1F4;
text-align:center;
width:20%;
color:#ffffff;
cursor:pointer;
}
#nav-collapse:hover {
text-decoration:none;
}
/* main navigation */
ul#main-nav {
list-style:none;
padding-left:0;
display:none;
}
ul#main-nav li {
z-index:9;
}
ul#main-nav li a {
display:block;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
border-bottom:1px solid #cccccc;
}
ul#main-nav li a:hover {
text-decoration:none;
background-color:#CDD1F4;
color:#ffffff;
}
/* first level navigation */
/* second level navigation */
ul#main-nav > li > ul {
display:none;
list-style:none;
padding-left:2%;
}
#media (min-width: 960px) {
/* toggle button */
#nav-collapse {
display:none;
}
/* main navigation */
ul#main-nav, ul#main-nav ul, ul#main-nav ul li {
margin:0;
padding:0;
}
ul#main-nav {
line-height:1;
list-style:none;
display:block;
overflow:visible;
}
ul#main-nav li a {
font-size:13px;
color:#6D87C3;
display:block;
text-decoration:none;
font-family: 'pt sans',Arial,Helvetica,sans-serif;
}
ul#main-nav li a:hover {
text-decoration:none;
background-color:transparent;
color:#6D87C3;
}
/* first level navigation */
ul#main-nav > li {
float:left;
padding:0;
margin:0;
position:relative;
}
ul#main-nav > li > a {
line-height:10px;
padding:0px 12px 0px 7px;
border-right:1px solid #6D87C3;
border-bottom:none;
}
ul#main-nav > li:hover > ul {
display:block;
}
/* second level navigation */
ul#main-nav > li > ul {
display:none;
position:absolute;
}
ul#main-nav > li > ul > li {
background-image:url('../img/trans3.png');
}
ul#main-nav > li > ul > li > a {
width:220px;
padding:15px 10px;
}
ul#main-nav > li > ul > li > a:hover {
color:#ffffff;
}
}

The problem is jQuery's .slideToggle() method dynamically adds a style: none to the element you are toggling, straight into the tag. So, it takes precedence over your media query rules set in your CSS. To overcome this issue, in your media query targeting devices with screen widths above 960px, add an !important to the display rule for the #main-nav.
ul#main-nav {
line-height:1;
list-style:none;
display:block !important;
overflow:visible;
}
Another thing I noticed was your determining factor for adding a listener to the click event on your navigation toggle. If it's dependent on the #main-nav's float attribute, then when the page is first loaded in landscape then switched to portrait the slide toggle will not work, because no listener has been attached to the #nav-collapse element on load. Something like the following approach should take care of that though:
$(document).ready(function () {
// Get the handlers
var collapseBtn = $('#nav-collapse');
collapseBtn.on('click', function () {
//if the device is desktop prevent toggle of nav
if (screen.width >= 960)
return;
mainNav.slideToggle();
});
});

How to determine which element is actually being hovered

I do not know a lot of JS. Although I already did my own search, but I could not find out answers. So I am asking here and hope you can help me out.
I am trying to create a navigation menu based on div tag (like http://www.adobe.com/), and using jQuery to make a function for "appear/disapper when hover".
Simple Div Structure:
<div id='menu'>
<div> Level 1 a
<div> Level 2 a </div>
<div> Level 2 b </div>
</div>
<div> Level 1 b
<div> Level 2 c </div>
<div> Level 2 d </div>
</div>
</div>
I understand that it will need to use $('#menu').hover() function. My question is, if only use one id "menu", how or what kind of function I can use to determine which actual menu list is being hovered??
Like:
$("#menu").hover( // Div Menu is being hovered
function () {
// $el = Determine which menu inside of Div Menu is actually being hovered
// $el.show();
},
function () {
$el..hide();
}
);
Or maybe my structure is completely wrong, Should use another method to do this? Please help.

$("#menu").hover( // Div Menu is being hovered
function (event) {
$el = $(event.target);
$el.show();
},
function (event) {
$el = $(event.target);
$el.hide();
}
);

Actually, there is no hover event. There are many different mouse events in two different models, and they are different in getting triggered from inner elements. Luckily, jQuery's hover method (actually mouseenter and mouseleave) abstracts over this and fires the handlers only when the parent element is hovered.
This means you have to bind the handler to every single element in the menu tree:
$("#menu div").hover(
function (event) {
console.log(event);
$(this).children().show();
},
function (event) {
$(this).children().hide();
}
);
Demo at jsfiddle.net

Yes you could use the code you wrote for determining when you hover a div. Then you trigger a function for displaying the dropdown menu. When you define the css of the navigation bar you should set the part that doesn't have to be visible at the beginning to display:hidden; in the div, so it's hidden. Then through jquery you inject code into the css for changing the property display. I give you an example. Let's assume you create a div called "hidden" and set this in the css among other possible styles:
#hidden {
display:hidden
}
Then you want the part with id "hidden" to appear when you hover the mouse.
You can use:
$("#hidden").hover.css('display', 'block')
so the hidden part will appear.
Anyway you can create a dropdown menu even simply by using css only without jquery.
Here i give you an example:
Let's say you have this markup in the html file
<ul id="nav">
<li>
Home
</li>
<li>
About
<ul>
<li>The product</li>
<li>Meet the team</li>
</ul>
</li>
<li>
Services
<ul>
<li>Sevice one</li>
<li>Sevice two</li>
<li>Sevice three</li>
<li>Sevice four</li>
</ul>
</li>
<li>
Product
<ul>
<li>Small product (one)</li>
<li>Small product (two)</li>
<li>Small product (three)</li>
<li>Small product (four)</li>
<li>Big product (five)</li>
<li>Big product (six)</li>
<li>Big product (seven)</li>
<li>Big product (eight)</li>
<li>Enourmous product (nine)</li>
<li>Enourmous product (ten)</li>
<li>Enourmous product (eleven)</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Out-of-hours</li>
<li>Directions</li>
</ul>
</li>
</ul>
As you can see here the markup is simply a series of nested "ul". No verbose IDs/classes, no divs, just rich, semantic code.
The #nav ul contains a series of li, and any that require a dropdown then contain another ul. Notice the dropdown ul have no classes on them—this is because we use the cascade to style these, keeping our markup even cleaner.
Now the CSS:
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
/* Clear floats */
float:left;
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333;
}
So by using a nested unordered list and some css you can make an effective dropdown menu. That is the best solution according to me. Because the easier way you can make a thing the better it is.
For more details and a full explaination and demo of the dropdown menu, go to: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
Of course you can set the colors and style as you prefer.

If you want a flyout vertical menu like that on Amazon check this example. It's simple, just html and css, no jquery. It looks alike.
HTML:
<ul class="nav">
<li>
<a href="#">
<strong>MP3s & Cloud Player</strong> 18 million songs, play anywhere
</a>
</li>
<li>
<a href="#">
<strong>MP3s & Cloud Player</strong> 18 million songs, play anywhere
</a>
<ul>
<li>
<a href="#">
<strong>Your Cloud Drive</strong> Anythign digital, securely stored, available anywhere
</a>
</li>
<li>
<a href="#">
<strong>Learn more about cloud</strong> </a>
</li>
</ul>
<span class="cover"></span>
</li>
<li>
<a href="#">
<strong>Kindle</strong>
</a>
</li>
</ul>​
CSS:
ul.nav{
font-size: 10px;
font-family: Verdana, Helvetica;
width: 200px;
background: #edf7ff;
}
ul.nav li{
padding: 5px 4px;
border: 1px solid #85abc9;
margin-bottom: -1px;
position: relative;
background: url(http://www.qualitymetric.com/Portals/0/images/orange_arrow.png) no- repeat 185px center;
}
ul.nav > li:hover{
background: #fff;
border: 1px solid #999;
z-index:1;
box-shadow: 0px 1px 0px #999;
-moz-box-shadow: 0px 1px 0px #999;
}
ul.nav > li:hover > span{
width: 5px;
height: 100%;
background: #fff;
position: absolute;
top: 0px;
bottom: 0px;
right: 15px;
z-index: 10;
}
ul.nav li a{
color: #666;
text-decoration: none;
}
ul.nav li a strong{
font-size: 11px;
color: #333;
font-weight: bold;
display: block;
}
/* dropdown */
ul.nav li ul{
width: 200px;
padding-left: 12px;
background: #fff;
border: 1px solid #999;
position: absolute;
border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 1px 1px 0px #999;
-moz-box-shadow: 1px 1px 0px #999;
top: -1px;
left: 180px;
z-index: 9;
display: none;
}
ul.nav li:hover > ul{
display: block;
}
ul.nav li ul li{
border: none;
padding-left: 12px;
background: url(http://www.qualitymetric.com/Portals/0/images/orange_arrow.png) no- repeat 0px 6px;
}
ul.nav li ul li a strong{
font-weight: normal;
color: #034995;
}
Look at the code and demo here: http://jsfiddle.net/blackpla9ue/KHLgm/8/
You can edit and add things as you prefer.
​

Vertical sliding / toggle menu

I'd like to use the vertical sliding/toggle menu, please see my code below, at the moment the menu toggles only when you click on the + sign, please see the code below.
I'm trying to work out a way when you click on the category name eg Posts and the sub menu would open (same functionality with the +) and the page would go to Posts page. And when you click on the + sign, the function and the page stay the same.
How can I target this task? Your help / suggestion is appreciated.
Thank you!
<html>
<head>
<style type="text/css">
body{background:#CCC;}
#container{margin:0 auto; background:white; border:1px solid #999; width:400px; padding:20px; -moz-border-radius:10px;-webkit-border-radius:10px; overflow:hidden;}
#menu {text-align:left;}
/*Toggle Area*/
#menu .toggle {float:right;width:9px; padding:5px; cursor:pointer; border-top:1px solid white; border-left:1px solid #E0E0E0; color:#999;}
#menu ul.navmenu li:first-child .toggle{border-width:0 0 0 1px;}
/*Menu Setup*/
#menu ul{padding:0; margin:0; width:150px;}
#menu ul ul{border:1px solid #CCC;overflow:hidden;}
#menu ul.navmenu li {margin:0; list-style:none;float:left;}
#menu ul.navmenu li li {float:none;}
/*Links*/
#menu ul.navmenu a, #menu ul.navmenu a:visited {text-decoration:none; padding:5px; display:block; color:#008FDD;}
#menu ul.navmenu ul.submenu a:hover{background:#FFF4D2; color:#333;}
/*Heading Outer div*/
#menu ul.navmenu .menutop{border:1px solid #CCC; border-width:0 1px; overflow:hidden; width:150px; background:#F9F9F9; }
/*Header Links*/
#menu ul.navmenu .menutop a{width:120px;float:left;margin:0 0 1px 0; border-top:1px solid white;}
/*Header Link Hover*/
#menu ul.navmenu .menutop a:hover{color:#333;}
/*Removes white border for the first header*/
#menu ul.navmenu li:first-child .menutop a {border-width:0px;}
/*Single Menu Width Fix*/
#menu ul.navmenu .menusingle a{width:140px;}
/*Border Radius and Special Border Width*/
#menu ul.navmenu li:first-child .menutop{border-width:1px 1px 0 1px; -moz-border-radius:5px 5px 0 0;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}
#menu ul.navmenu li:last-child .menutop{border-width:0px 1px 1px 1px; -moz-border-radius:0 0 5px 5px; -webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul.navmenu li:last-child ul.submenu{-moz-border-radius:0 0 5px 5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul.navmenu li:last-child .menutop-open{-moz-border-radius:0;-webkit-border-radius:0px; border-width:0 1px;}
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
hideMenus();
$('.toggle').click(function(){
var menu = $(this);
hideMenus();
if (menu.hasClass('toggle-open')) {
menuHide(menu);
}else{
menuShow(menu);
}
});
});
function hideMenus(){
$('.toggle').each(function(){
menuHide($(this));
});
}
function menuHide(menu){
menu.removeClass('toggle-open').addClass('toggle-closed').empty('').append('+').parents('li').children('ul').slideUp(250);
menu.parent('.menutop').removeClass('menutop-open').addClass('menutop-closed');
}
function menuShow(menu){
menu.parent('.menutop').removeClass('menutop-closed').addClass('menutop-open');
menu.removeClass('toggle-closed').addClass('toggle-open').empty('').append('–').parents('li').children('ul').slideDown(250);
}
</script>
</head>
<body>
<div id="container">
<div id="menu">
<ul class="navmenu">
<li><div class="menutop">Posts<div class="toggle">+</div></div>
<ul class="submenu">
<li>Add New</li>
<li>Tags</li>
</ul>
</li>
<li><div class="menutop">Pages<div class="toggle">+</div></div>
<ul class="submenu">
<li>Add New</li>
<li>Edit</li>
</ul>
</li>
<li><div class="menutop menusingle">Comments</div></li>
<li><div class="menutop">Users<div class="toggle">+</div></div>
<ul class="submenu">
<li>Manage</li>
<li>Add New</li>
<li>Profile</li>
</ul>
</li>
</ul>
</div></div>
</body>
</html>

This is code I have used to do exactly that, except I used arrow images instead of + and - but you should be able to modify it. Hope it helps!
Edit:
I've put the code below onto JSFiddle so you can try it out: http://jsfiddle.net/CrxAg/3/
HTML:
<div id="menu">
<div class="submenublock" id="submenu1"><h3>Category1</h3>
<ul>
<li>option1</li>
<li>option2</li>
</ul>
</div>
<div class="submenublock" id="submenu2"><h3>Category2</h3>
<ul>
<li>option1</li>
<li>option2</li>
</ul>
</div>
</div>
JS:
$(document).ready(function(){
$('div.submenublock > ul').hide();
$("div.submenublock > h3").css("background", "url(images/menuarrowdown.gif) no-repeat right bottom");
$('div.submenublock > h3').click(function() {
$(this).next().slideToggle('fast',function(){
//set arrow depending on whether menu is shown or hidden
if ($(this).is(':hidden')) {
$(this).prev().css("background", "url(images/menuarrowdown.gif) no-repeat right bottom");
} else {
$(this).prev().css("background", "url(images/menuarrowup.gif) no-repeat right bottom");
}
return false;
});
});
/* change appearance of h3 element on hover to make it look like a link */
$('div.submenublock > h3').hover(over, out);
function over(event) {
$(this).find("a").css("color", "#663");
$(this).css("cursor", "pointer");
}
function out(event) {
$(this).find("a").css("color", "");
$(this).css("cursor", "default");
}
/*end hover code*/
});