html - 寻找类似 Bonobos.com 的菜单系统-6ren

html - 寻找类似 Bonobos.com 的菜单系统

转载作者：行者123 更新时间：2023-11-28 14:46:15

我试图找到一个菜单系统，我可以构建一个类似于 http://www.bonobos.com/ 的网站导航。 .我需要它在每个下拉菜单中都有一个带有静态图像的下拉菜单。

如有任何帮助或指点，我们将不胜感激。谢谢。

最佳答案

它不是工作奇迹，但没有 java 脚本(opera、safari、firefox、chrome)。不需要 jQuery 代码，只是添加(尝试)一些效果，但效果不佳。

<!doctype html>
<html>
    <head>
        <title>Horizontal Dropdown CSS Menu</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            * {
                text-decoration:none;
                margin:0;
                padding:0;
                border:none;
                list-style:none
            }
            html{background-color:#999}
            body{
                font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
                color:#000;
                text-align:center
            }
            #wrapper {
                display:block;
                margin:auto;
                width:1024px;
                height:100%;
                background-color:#aaa;
                border:#ccc groove 2px
            }
            #content {
                width:auto;
                height:auto;
                background-color:#fff
            }
            #nav {
                position:relative;
                display:table;
                text-align:left;
                width:100%;
                height:30px;
                margin:auto;
                background-color:#eee;
                border-bottom:#eee groove 2px
            }
            #horizon-menu {
                float:left;
                clear:both;
                width:800px;
                height:30px;
                font-weight:700;
                background-color:#eee
            }
            #horizon-menu li {display:inline-block;height:30px}
            #horizon-menu li a {display:block;padding:6px;text-decoration:none;color:#555}
            #horizon-menu li ul li {display:none}
            #horizon-menu li a:hover {padding:6px;background-color:#fff}
            #horizon-menu li:hover ul {
                display:inline-block;
                position:absolute;
                z-index:1000;
                float:left;
                clear:none;
                min-width:200px;
                width:auto;
                min-height:160px;
                height:auto;
                margin:3px 0 0 -2px;
                /*padding:2px;*/
                border:#eee groove 2px;
                background-color:#eee
            }
            #horizon-menu li:hover ul img {display:inline;float:left;clear:none}
            #horizon-menu li:hover ul a img {background-color:transparent}
            #horizon-menu li:hover ul li {
                display:inline-block;
                width:auto;
                height:auto;
                float:left;
                clear:both;
                /*padding:2px*/
            }
            #horizon-menu li:hover ul li a {display:block;color:#555;text-decoration:none}
            #horizon-menu li:hover ul div a {display:block}
            #horizon-menu li:hover div {
                float:left;
                clear:none;
                margin-right:2px;
                min-width:160px;
                width:auto;
                min-height:150px;
                height:auto;
                background-color:#ddd
            }
        </style>
        <script type="text/javascript" src="lib/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('a').bind('click', function(){
                    alert('f!');
                })
                $('#nav, #horizon-menu li ul div').css('display','none');
                $('#nav').fadeTo("slow", 1.0);
                $('#horizon-menu li a').bind({
                    mouseenter: function(){
                        $('#horizon-menu li ul div').fadeTo("slow", 1.0);
                    },
                    mouseover: function(){
                        $('#horizon-menu li ul div').fadeTo("slow", 1.0);
                    }
                });
                $('#horizon-menu li ul').bind({
                    mouseleave: function(){
                        $('#horizon-menu li ul div').fadeTo("slow", 0);
                    },
                    mouseout: function(){
                        $('#horizon-menu li ul div').fadeTo("slow", 0);
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id="nav">
                <ul id="horizon-menu">
                    <li><a href="#">MacBook Pro</a>
                        <ul>
                            <li>
                                <div>
                                    <a href="#" title="">Link 1</a>
                                    <a href="#" title="">Link 2</a>
                                    <a href="#" title="">Link 3</a>
                                </div>
                                <div>
                                    <a href="#" title=""><img src="http://images.apple.com/home/images/promo_macbookpro_20110302.png" alt="" /></a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">MacBook Air</a></li>
                    <li><a href="#">MacBook</a>
                        <ul>
                            <li>
                                <div>
                                    <a href="#" title="">MacBook</a>
                                    <a href="#" title="">Wow!</a>
                                </div>
                                <div>
                                    <img src="http://images.apple.com/home/images/promo_macbookpro_20110302.png" alt="" />
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div id="content">
                <h1><img src="http://images.apple.com/macbookair/images/performance_title20101020.png" alt="Might made light." height="46" width="333"></h1>
                <p class="intro">Don’t be fooled by the sliver-thin profile of <a class="ml-smartlink" href="http://en.wikipedia.org/wiki/MacBook">MacBook</a> Air. This small wonder features powerful NVIDIA graphics, an Intel Core 2 Duo processor, lightning-fast flash storage, and long battery life. So while looks may be deceiving, performance doesn’t lie.</p>
                <img src="http://images.apple.com/macbookair/images/bg_hardware_20101020.png" alt="" height="441" width="705" />
            </div>
        </div>
    </body>
</html>

关于html - 寻找类似 Bonobos.com 的菜单系统，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5239050/

文章推荐： swift - 从 Any 转换为其他任何对象都失败

文章推荐： css 过滤器获取图像 "bluescale"？

文章推荐： HTML - 中心列表和图标到底部

文章推荐： css - 跨浏览器的 CSS max-width 属性的不一致和意外行为

com - COM 内存泄漏的常见原因是什么？
COM 内存泄漏最常见的原因是什么？我读过将初始化的 CComBSTR 的地址作为 [out] 参数传递给函数会导致泄漏。我正在寻找像这样枚举其他常见的编程错误。最佳答案未能为 COM 对象使用
com - COM 中的内存管理
在COM服务器执行过程中分配一 block 内存，然后通过一个输出参数将该内存块传递给客户端是很常见的。然后，客户端有义务使用 CoTaskMemFree() 等方法释放该内存。问题是，这 bloc
com - MFC COM 或 ATL COM (ActiveX)
我有一些 MFC 代码(自定义 CWnd 控件和一些要公开的类)，我需要将它们制作成带有接口(interface)的 activex/COM 对象。使用 MFC 支持制作 ATL 项目并以这种方式制作
com - 制作一个 .com 程序来调用 .exe(比如 devenv.com)
Devenv.com 是 visual studio 命令行界面，当您键入 devenv/? 时，devenv 的帮助会出现在控制台上。但是，如果没有任何选项，devenv.com 只会调用 deve
com - 从 COM 库传递对 COM 接口(interface)的引用
如何将 COM 接口(interface)的引用作为 COM 库中的参数传递？这是示例: 1)客户端代码成功创建coclass并接收到pFunctionDiscovery中的接口(interface
django - 'foo.bar.com.s3.amazonaws.com' 不匹配 '*.s3.amazonaws.com' 、 's3.amazonaws.com'
我正在使用 django，我在 s3 中存储了诸如 imgs 之类的东西(为此我使用的是 boto)，但最近我收到了这个错误: 'foo.bar.com.s3.amazonaws.com' doesn
windows - 将 COM 对象导入 COM+ 应用程序，同时保留直接访问 COM 对象？
我已经使用组件服务 MSC 对话框创建了一个 COM+ 应用程序。我将一个现有的 COM 对象导入到这个新的 COM+ 应用程序中。我知道可以通过 COM+ 应用程序调用该 COM 对象。我可以简单
php - stackoverflow.com、airbnb.com、google+、facebook.com 等开发中使用的工具？
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 11 年前。 Improve thi
c# - COM Interop 挂起会卡住整个 COM 系统。如何取消 COM 调用
我正在使用通过 COM Interop 包装器公开的第三方 dll。但是，其中一个 COM 调用经常卡住(至少从不返回)。为了至少让我的代码更健壮一些，我异步包装了调用(_getDeviceInfoW
php - 将 www.domain.com/example.com 重定向到 example.com
很多年前我读到有一个简单的 php 脚本可以将您的网站重定向到 http://example.com/google.com 到 google.com它适用于正斜杠右侧的任何域。我忘记了这个脚本是什么或
com - 进程外 COM 服务器的注册表项
我正在实现我的第一个进程外 COM 服务器(我的第一个 COM 服务器，就此而言)。我已经按照步骤编写了一个 IDL 文件，为代理/ stub DLL 生成代码，编译 DLL，并注册它。当我检查注册
com - COM RCW 上的地址
是否可以在未知接口(interface)上增加 RCW 引用计数？ (即不是底层 COM 对象的引用计数) 我有一些旧的 COM 服务器代码 int Method1(object comobject)
com - 大多数对象不支持 COM 聚合吗？
我注意到许多关于 COM 的书籍等都指出，在 COM 聚合中实现一个可用作内部对象的对象相对容易。但是，除非我遗漏了什么，否则聚合似乎只能在极其有限的场景中成功，因此只有在明确识别出这种场景时才应提供
com - 如何在运行时注册 COM 库？
假设我正在开发一个安装 COM 组件并安装程序注册它们的应用程序。这很好用。现在该软件需要从内存棒上运行。如何注册我的库运行时并确保在运行应用程序后清理注册表？最佳答案您总是在 XP 或更高版本
com - ActiveX/COM/VB6企业项目的生成过程
我们已经使用Microsoft的ActiveX/COM(VB6)技术开发了一个软件系统。去年，我对自动化构建过程和整个SCM越来越感兴趣。我集中搜索了网络的大部分内容，以获取有关如何使用基于COM的软
com - 避免 COM 编码
我对 com 线程模型有点困惑。我有一个 inproc 服务器，我想创建一个可从任何线程访问的接口(interface)，而不管 CoInitializeEx 中使用的线程模型和/或标志。当将接口
com - MSIX -> COM 服务器的本地激活权限
我的包以旁加载方式安装，并不断遇到特定于应用程序的权限错误。是的，许多人建议在 regedit 和组件服务中手动更改权限和所有者。我的应用实际上在组件服务(DCOMCNFG、DCOMCNFG -3
com - 应用程序不返回时指向 COM 对象的指针
我正在使用第三方应用程序，并调用创建的实例。我的 COM 对象。这个调用成功了，但是第三方应用程序上的函数没有返回指向创建对象的指针(我不知道为什么)。有没有办法获得指向我的对象的指针？为了澄清，
com - 使用 COM 互操作时如何管理对象生命周期？
我有一个用 C# 编写的托管 COM 对象和一个用 C++(MFC 和 ATL)编写的 native COM 客户端和接收器。客户端创建对象并在启动时向其事件接口(interface)提供建议，并在其
com - 为什么我不能注册我的 COM DLL？
我的应用程序需要注册两个 COM DLL。如果用户有必要的访问权限，它会自动完成，否则可以使用 regsvr32 完成。 . 现在在一些工作站上会发生以下情况: 开始cmd.exe作为管理员注册第一

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 寻找类似 Bonobos.com 的菜单系统