Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >Superfish水平导航栏css问题

问Superfish水平导航栏css问题
EN

Stack Overflow用户

提问于 2012-08-27 11:53:51

回答 1查看 3.2K关注 0票数 0

我目前正在我的网站www.bonusrunner.net上使用Superfish (http://users.tpg.com.au/j_birch/plugins/superfish/#sample4)创建的水平导航栏(正在建设中:)

可在此处下载.css和.js文件：http://users.tpg.com.au/j_birch/plugins/superfish/#download

我正在努力进行一些css调整。我想要我的菜单和http://www.oddsportal.com上的菜单完全一样--有人能帮我吗？首先，如何使我的子菜单永久可见，其次，我希望子菜单背景的宽度为100%。

最好的，Slynge

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-08-27 13:18:59

首先，将示例(#4)中的正确代码添加到您的页面：

$(document).ready(function(){ 
    $("ul.sf-menu").superfish({ 
        pathClass:  'current' 
    }); 
});

(您忘记了页面上的pathClass )。

然后，包含的superfish-navbar.css将负责其余的工作。

更新

<ul class="sf-menu sf-navbar sf-js-enabled sf-shadow">
    <li class="current">
        <a href="http://www.bonusrunner.net/#a" class="sf-with-ul">Bonusrunner<span class="sf-sub-indicator"> »</span></a>
        <ul>
            <li>
                <a href="http://www.bonusrunner.net/#ab">Anvend Bonusrunner</a>
            </li>
            <li><a href="http://www.bonusrunner.net/#ab">Om Bonusrunner</a></li>
            <li><a href="http://www.bonusrunner.net/#ab">Ludomani Test</a></li>
            <li><a href="http://www.bonusrunner.net/#ab">Ansvarligt Spil</a></li>

        </ul>
    </li>
    <li>
        <a href="http://www.bonusrunner.net/#a" class="sf-with-ul">Casino<span class="sf-sub-indicator"> »</span></a>
        <ul>
            <li>
                <a href="http://www.bonusrunner.net/#ab">Casino Bonus</a>
            </li>
            <li><a href="http://www.bonusrunner.net/#ab">Casino Guide</a></li>
            <li><a href="http://www.bonusrunner.net/#ab">Casino Nyheder</a></li>
            <li><a href="http://www.bonusrunner.net/#ab">No Deposit Casino</a></li>
        </ul>
    </li>
    <li>
        <a href="http://www.bonusrunner.net/#a" class="sf-with-ul">Betting<span class="sf-sub-indicator"> »</span></a>
        <ul>
            <li>
                <a href="http://www.bonusrunner.net/#ab">Betting Nyheder</a>
            </li>
            <li><a href="http://www.bonusrunner.net/#ab">Betting Guide</a></li>
            <li><a href="http://www.bonusrunner.net/#ab">Betting Ekspertråd</a></li>
        </ul>
    </li>

注意菜单上应该在加载时打开的class="current"。在从你的网站下载的代码上试用它，效果很好。

票数 1

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12141466

复制

相关文章

使用html和css制作水平导航栏nav

编程算法 c++https java 网络安全

使用html和css制作水平导航栏nav的方法及其效果： 1、li设置float:left; （1）代码片段：

全栈程序员站长

2022/09/01

3.8K0

bootstrap 按钮组水平导航栏

button class default dropdown href

<div class="btn-group"> <button class="btn btn-default" type="button">首页</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">产品展示<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div> <button class="btn btn-default" type="button">案例分析</button> <button class="btn btn-default" type="button">联系我们</button> <button class="btn btn-default" type="button">关于我们</button> </div>

用户5760343

2019/07/05

1.6K0

CSS + HTML导航栏效果

java https 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/140426.html原文链接：https://javaforall.cn

全栈程序员站长

2022/09/02

4.5K0

html导航栏自动调间距,HTML CSS导航栏间距[通俗易懂]

css java https c++网络安全

我做了一个CSS导航栏，但是在每个“navbar-item”之间，都有一点空间。我不希望那里有任何变化！有没有办法做到这一点，而不改变每个navbar-item的余裕？HTML CSS导航栏间距

全栈程序员站长

2022/09/01

5.5K0

【CSS】课程网站头部制作 ② ( 导航栏测量 | 导航栏编写 | 代码示例 )

css html 网站存储工具

导航栏最左侧位置 , 距离 logo 盒子有 70 像素 , 考虑到设置外边距 , 这里将 logo 盒子与导航栏之间的距离设置成 60 像素即可 ;

韩曙亮

2023/04/03

3.9K0

【CSS】课程网站头部制作 ② ( 导航栏测量 | 导航栏编写 | 代码示例 )

固定导航栏css样式代码

其实很简单，在css里给导航栏所在的div设置四个属性，position设置为fixed，top和left设置为0px，然后把z-index的值设置成最高，即可实现。

用户7718188

2021/11/02

3.9K0

html页面缩小导航栏隐藏,html – 导航栏缩放问题[通俗易懂]

css https java 网络安全 html

我有一个问题,我的导航栏似乎与CSS中的.container缩放.现在,我是一个新手,但我已经尝试搞乱CSS中的值,但无济于事.这是

全栈程序员站长

2022/09/02

4.6K0

【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )

css 网站容器继承配置

该盒子是处于版心位置 , 先为其设置版心的样式 , 版心宽度 1200 像素 , 水平居中 , 先将版心的样式设置给盒子 ;

韩曙亮

2023/04/06

5.2K0

【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )

第8天：CSS制作导航栏

今天主要学习了网页导航栏的制作。注意：引入外部CSS样式时，如果使用background：url（../images/1.png）,一定记得用..跳出当前文件夹，回到上级目录。

半指温柔乐

2018/09/11

2K0

【CSS】CSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )

css html center text

在 div 盒子中的 a 标签是行内元素 , 为其设置宽高是无效的 , 首先要将其转为行内块样式 ;

韩曙亮

2023/03/30

4.4K0

【CSS】CSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )

CSS+JQ实现炫酷导航栏

接下来设置CSS属性,这里要注意标签a是行级元素,所以需要用display转成块级元素,这个很常用,还有就是line-height的常见用法

用户1503405

2021/09/23

1.9K0

CSS+JQ实现炫酷导航栏

接下来设置CSS属性,这里要注意标签a是行级元素,所以需要用display转成块级元素,这个很常用,还有就是line-height的常见用法

用户7718188

2021/11/01

1.9K0

【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )

flutter 博客事件索引源码

Flutter 中的 Scaffold 组件实现了基础的材料设计 ( Material Design ) 可视化布局结构 ;

韩曙亮

2023/03/29

6.2K0

【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )

CSS+HTML 顶部导航栏实现「建议收藏」

https java 网络安全

2018/11/16更新：最近在使用这个导航栏的时候，发现页面在放大和缩小的情况下，导航栏的布局和显示都有些小问题，所以重新改了一下css部分的代码，重新贴上来

全栈程序员站长

2022/09/01

3.3K0

导航栏滚动渐变效果 html+css+js

https java 网络安全

6.当页面有滚动后导航栏的样式，padding上下变小，字体颜色变，有了蓝背景色：

全栈程序员站长

2022/08/24

9.2K0

导航栏滚动渐变效果 html+css+js

纯HTML CSS制作导航栏下拉菜单

https java 网络安全 html

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/140190.html原文链接：https://javaforall.cn

全栈程序员站长

2022/09/01

6.3K0

【CSS】828- 纯CSS导航栏下划线跟随效果

在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。

pingan8787

2021/01/13

3K0

【CSS】828- 纯CSS导航栏下划线跟随效果

点击导航栏，切换div内容（js+css+html）[通俗易懂]

java https 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/140453.html原文链接：https://javaforall.cn

全栈程序员站长

2022/08/24

12.7K0

点击导航栏，切换div内容（js+css+html）[通俗易懂]

bootstrap 导航栏

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu"> <span class="sr-only">展开导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">网站标题</a> </div> <div class="collapse navbar-collapse" id="menu"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">导航标题1</a></li> <li><a href="#">导航标题2</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">下拉菜单1</a></li> <li class="divider"></li> <li><a href="#">下拉菜单2</a></li> <li class="divider"></li> </ul> </li> </ul> </div> </nav> </body> </html>

用户5760343

2019/07/05

3.4K0

iOS 原生导航栏修改导航栏文字颜色大小

// 黑色导航栏状态栏 self.navigationController.navigationBar.barStyle = UIBarStyleBlack; self.navigationController.navigationBar.barTintColor = [UIColor blackColor]; // 白色文字 // 中间title [self.navigationController.navigationBar setTitleTextAttributes:@{NSFontAttr

ppppy

2022/11/15

2.5K0

相似问题

CSS水平导航栏问题

20

水平导航栏问题

11

水平导航栏问题

21

Superfish CSS导航下拉宽度

31

Tumblr中的水平导航栏问题(CSS/HTML)

20

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例