章节
问答
课签
笔记
评论
占位
占位

下拉菜单--属性声明式方法(一)

属性声明式方法:

一般下拉菜单都是出现在导航条中,比如下图的一个效果,用户点击带有三角形的菜单项都会弹出下拉菜单项:

<div class="navbar navbar-default" id="navmenu">
    <a href="##" class="navbar-brand">W3cplus</a>
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
                <li role="presentation"><a href="##">CSS3</a></li>
                <li role="presentation"><a href="##">HTML5</a></li>
                <li role="presentation"><a href="##">Sass</a></li>
            </ul>
        </li>
        <li><a href="##">前端论坛</a></li>
        <li><a href="##">关于我们</a></li>
    </ul>
</div>

除了这种导航条之外,在胶囊式导航中也具有下拉菜单,其结构如:

<ul class="nav nav-pills">
    <li class="dropdown">
        <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
            <li role="presentation"><a href="##">CSS3</a></li>
            <li role="presentation"><a href="##">HTML5</a></li>
            <li role="presentation"><a href="##">Sass</a></li>
        </ul>
    </li>
    <li class="active"><a href="##">前端论坛</a></li>
    <li><a href="##">关于我们</a></li>
</ul>

运行效果如下:

任务

?不会了怎么办
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最赞回答 / qq_忆真芙蓉_0
在 .nav类后面加 .nav-stacked 类名就可以了。代码如下:<ul class="nav nav-pills nav-stacked">     <li class="active"><a href="#">HTML5</a></li>     <li><a href="#">CSS3</a></li>     <li><a href="#">jQuery<...

最新回答 / 策马_奔腾
什么问题?

最赞回答 / 慕UI6541729
是按钮点击切换样式。删除之后按钮在点击和不点击时是一个状态

已采纳回答 / 迷途的马尔斯
role="menu"表示这是一个菜单样式aria-labelledby="tutorial"表示一下的标签是"tutorial"菜单的选项,而上面必须要定义一个id为"tutorial"的标签来触发这个菜单

最新回答 / Dr周
ul放在对应的里里面,,加上menu就可以看出来了
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言