我正在开展Shopify项目.我不是设计师.我需要为商店制作一个弹出菜单.这个问题有两个问题.首先,弹出窗口需要延伸到视口的底部.其次,我想在Navigation Div中将所有内容捆绑在一起,但是我需要弄清楚如何将元素从其父元素中分离出来,然后在其他内容上“自行分层”而不移动它.
我以为我只是用CSS隐藏菜单,然后使用jQuery在翻转时取消隐藏它.我认为这不会起作用.我不知道如何定位弹出窗口,所以它不会绕过周围的一切.
这是现在的网站:
https://hodkiewicz-zieme-and-hirthe180.myshopify.com/
这是它应该是什么样子:http://tinypic.com/r/35hnyox/6
这是当前nav列中的内容.我可能会改变结构.
<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-->
解决方法
这是所需的输出,具有所需的确切功能.
请参阅小提琴代码:http://jsfiddle.net/NNfUb/2/
演示: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(); }); });
我通过从您的网页复制您的源代码并开始工作来创建上述小提琴.我创建了全高度功能,它将高度提升到内容高度,并根据屏幕截图中提供的所需设计显示子链接.如果您需要任何更改或增强,则需要调整css或代码.它适用于每个视口.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。