jQuery Flyout Menu. Breaking an element out of its parent - html

Question

I'm working on a Shopify project. I am not the designer. I need to make a flyout menu for the shop. The problem is two fold. First of all, the flyout needs to extend to the bottom of the viewport. Secondly, I'd like to bundle everything together in the Navigation Div, but I need to figure out how to break the element out of its parent and then "layer itself" over the rest of the content without moving it around.
I thought I'd just hide the menu with CSS and then use jQuery to un-hide it on rollover. I don't think that will work though. I don't know how to position the flyout so it doesn't schlep everything around.
Here's the site now:
https://hodkiewicz-zieme-and-hirthe180.myshopify.com/
Here's what it should look like: http://tinypic.com/r/35hnyox/6
Here's what's in the nav column currently. I'll probably change the structure.
<div id="navbar" class="green">
<ul id="navigation">
{% for link in linklists.main-menu.links %}
<li><a class="green" href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
<li><a class="green" href="#">{{ linklists.packard.title }}</a>
<ul class="sub-menu">
<li><a class="green" href="#">-1930 Speedster</a></li>
<li><a class="green" href="#">-1929-31 Super 8</a></li>
<li><a class="green" href="#">-Late 1931-32 Super 8</a></li>
<li><a class="green" href="#">-1929-31 Standard 8</a></li>
<li><a class="green" href="#">-Late 1931-32 Standard 8</a></li>
<li><a class="green" href="#">-Rare Parts</a></li>
<li><a class="green" href="#">-745 Parts</a></li>
</ul>
</li>
<li><a class="green" href="#">{{ linklists.cadillac.title }}</a>
<ul class="sub-menu">
<li><a class="green" href="#">-1932-33 V12 & V16</a></li>
<li><a class="green" href="#">-1934-37 V12 & V16</a></li>
</ul>
</li>
<li><a class="green" href="/cart">Cart</a></li>
<li><a class="green" href="/checkout">Check Out</a></li>
</ul><!--Navigation--><!--Navigation-->
<ul class="sub-navs">
<ul class-"sub-nav">
<li>Carburetor</li>
<li>Parts</li>
<li>Manifolds</li>
<li>Accessories</li>
<li>Sculpture</li>
</ul>
</ul>
<img id="#navbar-logo" src="{{'logo.png' | asset_url}}">
<p id="nav-phone" class="black center bold">775.842.4282</p>
<p class="black center nav-small bold">packardcarbs#gmail.com</p>
<p class="black ce
nter nav-small bold">Sparks, NV USA</p>
</div><!--Navbar-->

Answer 1

Here is the desired output with exact functionality required in question.
See fiddle for code : http://jsfiddle.net/NNfUb/2/
Demo: http://jsfiddle.net/NNfUb/2/embedded/result
CSS:
#content
{
position:relative;
}
#flyout_container
{
position:absolute;
width:175px;
top:0;
left:0;
background:#107042;
display:none;
}
.sub-nav
{
padding:0;
margin:0;
display:none;
}
.sub-nav li
{
padding:5px 5px 5px 10px;
display:block;
color:#fff;
font-size:14px;
font-weight:bold;
}
jQuery:
$(document).ready(function(){
var container = $("<div id='flyout_container'>");
container.appendTo($("#content"));
var contentHeight = $("#content").height();
container.css({"height": (contentHeight + 10) + "px"});
$("a#show_sub_nav_1").mouseover(function(){
$("#sub_nav_1").appendTo(container).show();
container.toggle();
//container.show();
var fromTop = parseInt($(this).offset().top);
$("#sub_nav_1").css({"margin-top": (fromTop - 205) + "px"});
});
$("#flyout_container").mouseleave(function(){
$("#flyout_container").hide();
});
});
I have created the above fiddle by copying your source code from your webpage and work on that. I have created the full height functionality which is taking height upto the content height and showing the sub-links as per your desired design provided in screenshot. You need to tweek the css or code if you need any changes or enhancement. It will work on every viewport.
Note: If any issues please let me know. I hope this will solve your problem because i have used different approach.

Answer 2

position: absolute makes the position relative to the nearest non-static-positioned ancestor. So, if you change the navigation ul to position: relative, and the flyout to position: absolute, you will be able to set the position of the flyout menu relative to the main navigation. That means that even if you resize the page, the flyout will still be in the right spot.
#navigation {
position: relative;
}
.flyout {
position: absolute;
top: 0;
left: 100%;
}
(You could also set #navbar or #navigation > li to position: relative instead.)
You'll still need to fiddle with positioning and other styles a bit, but hopefully that sets you on the right path.

Answer 3

Changing the element's position to absolute will allow you to position it accurately without interrupting the flow of the document.
.flyout {
position: fixed;
left: 0px; (number of pixels from the left edge of the document)
top: 0px; (number of pixels from the top edge of the document)
}