Databases
StackOverflow2013
Postsdbo
POjQuery Flyout Menu. Breaking an element out of its parent
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Flyout Menu. Breaking an element out of its parent
    primarykey
    data
    text
    <p>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. </p> <p>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.</p> <p>Here's the site now: <a href="https://hodkiewicz-zieme-and-hirthe180.myshopify.com/" rel="nofollow">https://hodkiewicz-zieme-and-hirthe180.myshopify.com/</a></p> <p>Here's what it should look like: <a href="http://tinypic.com/r/35hnyox/6" rel="nofollow">http://tinypic.com/r/35hnyox/6</a></p> <p>Here's what's in the nav column currently. I'll probably change the structure.</p> <pre><code>&lt;div id="navbar" class="green"&gt; &lt;ul id="navigation"&gt; {% for link in linklists.main-menu.links %} &lt;li&gt;&lt;a class="green" href="{{ link.url }}"&gt;{{ link.title }}&lt;/a&gt;&lt;/li&gt; {% endfor %} &lt;li&gt;&lt;a class="green" href="#"&gt;{{ linklists.packard.title }}&lt;/a&gt; &lt;ul class="sub-menu"&gt; &lt;li&gt;&lt;a class="green" href="#"&gt;-1930 Speedster&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="green" href="#"&gt;-1929-31 Super 8&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="green" href="#"&gt;-Late 1931-32 Super 8&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="green" href="#"&gt;-1929-31 Standard 8&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="green" href="#"&gt;-Late 1931-32 Standard 8&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="green" href="#"&gt;-Rare Parts&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="green" href="#"&gt;-745 Parts&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a class="green" href="#"&gt;{{ linklists.cadillac.title }}&lt;/a&gt; &lt;ul class="sub-menu"&gt; &lt;li&gt;&lt;a class="green" href="#"&gt;-1932-33 V12 &amp;amp; V16&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="green" href="#"&gt;-1934-37 V12 &amp;amp; V16&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a class="green" href="/cart"&gt;Cart&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="green" href="/checkout"&gt;Check Out&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;&lt;!--Navigation--&gt;&lt;!--Navigation--&gt; &lt;ul class="sub-navs"&gt; &lt;ul class-"sub-nav"&gt; &lt;li&gt;Carburetor&lt;/li&gt; &lt;li&gt;Parts&lt;/li&gt; &lt;li&gt;Manifolds&lt;/li&gt; &lt;li&gt;Accessories&lt;/li&gt; &lt;li&gt;Sculpture&lt;/li&gt; &lt;/ul&gt; &lt;/ul&gt; &lt;img id="#navbar-logo" src="{{'logo.png' | asset_url}}"&gt; &lt;p id="nav-phone" class="black center bold"&gt;775.842.4282&lt;/p&gt; &lt;p class="black center nav-small bold"&gt;packardcarbs@gmail.com&lt;/p&gt; &lt;p class="black ce nter nav-small bold"&gt;Sparks, NV USA&lt;/p&gt; &lt;/div&gt;&lt;!--Navbar--&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJosh Infiesto
    1. USJosh Infiesto
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery Flyout Menu. Breaking an element out of its parent
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POjQuery Flyout Menu. Breaking an element out of its parent
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POjQuery Flyout Menu. Breaking an element out of its parent
      1. USJosh Infiesto
      1. VTBountyStart
    1. COPost some code for the flyout
      singulars
      1. POjQuery Flyout Menu. Breaking an element out of its parent
      1. USDC_
    2. CO@Josh Infiesto i can solve this issue i need working code i mean fiddle. Or provide css, javascript you have tried because for creating from scratch will take a lot of time here in you situation.
      singulars
      1. POjQuery Flyout Menu. Breaking an element out of its parent
      1. USw3uiguru
    3. CO@Josh Infiesto Dear please have a look on my answer and demo link provided on that. Please let me know if any issues so i can work on that. Thanks
      singulars
      1. POjQuery Flyout Menu. Breaking an element out of its parent
      1. USw3uiguru
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload