弹出式导航栏

最新推荐文章于 2022-06-06 18:21:29 发布
最新推荐文章于 2022-06-06 18:21:29 发布
阅读量1.4w 收藏 1
点赞数
分类专栏： css前台 文章标签： js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhao6886/article/details/24028057
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 漂亮的导航栏 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
 .menu {
  font-family: arial, sans-serif;
  width:750px;
  margin:0;
  border:#F66FFF 1px solid;
 }
 .menu ul {
  padding:0;
  margin:0;
  list-style-type: none;
 }
 .menu ul li {
  float:left;

  /*浮动效果*/
  position:relative;
 }
 .menu ul li:hover a {
  color:#fff;
  background:#b3ab79;
 }
 .menu ul li a, .menu ul li a:visited {
  display:block;
  text-align:center;
  text-decoration:none;
  width:105px;
  height:30px;
  color:#000;
  border:1px solid #ffffff;
  border-width:1px 1px 0 0;
  background:#c9c9a7;
  line-height:30px;
  font-size:11px;
 }
 .menu ul li ul {
  display: none;
 } 
 .menu ul li:hover ul {
  display:block;

  /*这个代码相当重要啊*/
  position:absolute;
  top:31px;
  left:0;
 } 
 .menu ul li:hover ul li a {
  display:block;
  background:#faeec7;
  color:#000;
 }
 .menu ul li:hover ul li a:hover {
  background:#dfc184;
  color:red;
 }
</style>
</head>
 <body>
  <div class="menu">
   <ul>
    <li>
     <a class="hide" href="#">水果1</a>
     <ul>
      <li><a href="#" title="这是个超链接">苹果</a></li>
      <li><a href="#" title="这是个超链接">苹果</a></li>
      <li><a href="#" title="这是个超链接">苹果</a></li>
      <li><a href="#" title="这是个超链接">苹果</a></li>
      <li><a href="#" title="这是个超链接">苹果</a></li>
      <li><a href="#" title="这是个超链接">苹果</a></li>
      <li><a href="#" title="这是个超链接">苹果</a></li>
      <li><a href="#" title="这是个超链接">苹果</a></li>
      <li><a href="#" title="这是个超链接">苹果</a></li>
     </ul>
    </li>
       <li>
     <a class="hide" href="#">水果2</a>
     <ul>
      <li><a href="#">香蕉</a></li>
      <li><a href="#">香蕉</a></li>
      <li><a href="#">香蕉</a></li>
      <li><a href="#">香蕉</a></li>
      <li><a href="#">香蕉</a></li>
      <li><a href="#">香蕉</a></li>
      <li><a href="#">香蕉</a></li>
     </ul>
    </li>
    <li>
     <a class="hide" href="#">水果3</a>
     <ul>
      <li><a href="#">橘子</a></li>
      <li><a href="#">橘子</a></li>
      <li><a href="#">橘子</a></li>
      <li><a href="#">橘子</a></li>
      <li><a href="#">橘子</a></li>
     </ul>
    </li>
    <li>
     <a class="hide" href="#">水果4</a>
     <ul>
      <li><a href="#">柠檬</a></li>
      <li><a href="#">柠檬</a></li>
      <li><a href="#">柠檬</a></li>
      <li><a href="#">柠檬</a></li>
      <li><a href="#">柠檬</a></li>
      <li><a href="#">柠檬</a></li>
      <li><a href="#">柠檬</a></li>
     </ul>
    </li>
    <li>
     <a class="hide" href="#">水果5</a>
     <ul>
     <li><a href="#" title="这是个超链接">西瓜</a></li>
     <li><a href="#" title="这是个超链接">西瓜</a></li>
     <li><a href="#" title="这是个超链接">西瓜</a></li>
     <li><a href="#" title="这是个超链接">西瓜</a></li>
     <li><a href="#" title="这是个超链接">西瓜</a></li>
     <li><a href="#" title="这是个超链接">西瓜</a></li>
     <li><a href="#" title="这是个超链接">西瓜</a></li>
     <li><a href="#" title="这是个超链接">西瓜</a></li>
     <li><a href="#" title="这是个超链接">西瓜</a></li>
     </ul>
    </li>
    <li>
     <a class="hide" href="#">水果5</a>
     <ul>
      <li><a href="#" title="Example one">冬瓜</a></li>
      <li><a href="#" title="Weft fonts">冬瓜</a></li>
      <li><a href="#" title="Vertical align">冬瓜</a></li>
     </ul>
    </li>
    <li>
     <a class="hide" href="#">水果6</a>
     <ul>
      <li><a href="#">西红柿</a></li>
      <li><a href="#" >西红柿</a></li>
      <li><a href="#" >西红柿</a></li>
      <li><a href="#">西红柿</a></li>
     </ul>
    </li>
   </ul>
   <div style="width:800px;height:200px;border:#5566ff solid 1px; ">ddddddddddddddddddddddddd</div>
  </div>
 </body>
</html>

zhao6886
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DRLND_P1_Navigation:Udacity深度强化学习项目1-香蕉导航
04-19
项目1：导航 介绍 该项目旨在培训具有DQN的特工，以学习如何在大型方形世界中导航（并收集香蕉！）。 提供+1的奖励以收集黄色香蕉，提供-1的奖励以收集蓝色香蕉。 因此，代理商的目标是尽可能多地收集黄色香蕉，同时避免使用蓝色香蕉。 状态空间具有37个维度，并包含主体的速度以及围绕主体向前方向的物体的基于光线的感知。 有了这些信息，代理就必须学习如何最好地选择动作。 提供了四个离散操作，分别对应于： 0向前移动。 1向后移动。 2向左转。 3向右转。 该任务是情节性的，并且为了解决环境，您的特工必须在100个连续情节中获得+13的平均得分。 入门 从下面的链接之一下载环境。 您只需要选择与您的操作系统匹配的环境即可： Linux： Mac OSX： Windows（32位）： Windows（64位）： （对于Windows用户）如果您需要帮助来确定您的计算机运行的是Wi
史上最全网址导航大全，让世上没有找不到的好东西
lzcsdn233的博客
01-04 24万+
收录的导航网址大全 好用和常用的网址几乎都在里面,个人喜欢往浏览器书签收藏夹里塞喜欢的干货和网站，以至于收藏夹里有着几千条网址，所以比较喜欢导航，但是浏览器原生自带的导航又太low,所以一般自己设置打开浏览器时即开的导航页便于工作和学习. 辛苦收集整理，喜欢给个赞哦???? 常用 导航名 地址 今日热榜 https://tophub.today 龙轩导航 http://ilxdh.c...
好看的导航主页html,推荐|各种漂亮的网页导航，让浏览器靓起来
weixin_39527487的博客
06-10 18万+
最近刚买了电脑，蹲了半个月，实在是蹲不到荣耀magicbook14的16G版。忍不住加钱买了小新PRO13，真的是万幸的是目前还没有遇到较大的品控问题，新电脑入手肯定得一番折腾。强迫症的我为了个网页导航折腾了一下午，真的是太闲了我。至于我为什么这么闲，那一切就要从一只小小的蝙蝠说起了。言归正传，今天我就来给大家分享一下几个好看又好用的浏览器主页。一、简法主页这个就是我挑选了几个之后选用的导航，说实...
很色，非常色，十分色，格外色，异常色，特别色，相当色，太色了！
热门推荐
coldwindflyrain的专栏
06-18 134万+
■■★●◆lightpink（浅粉红)■■★●◆pink（粉红）■■★●◆crimson（腥红）■■★●◆lavenderblush（苍白的紫罗兰红）■■★●◆palevioletred（脸红的淡紫红）■■★●◆hotpink（热情的粉红）■■★●◆mediumvioletred（适中的紫罗兰红）■■★●◆orchid（兰花紫）■■★●◆thistle（苍紫）■■★●◆plum（轻紫）■■★●◆v
柠檬导航巨人导航正品蓝_福特合作Telenav提供汽车导航服务 即使无蜂窝网络也可正常工作...
weixin_39643336的博客
11-20 33万+
加入盖世行业交流群，请加微信(盖世汽车豆豆：gasgoo88)出示名片，了解更多行业资讯盖世汽车讯 据外媒报道，随着全新款F-150皮卡和Bronco两门与三门4x4 SUV车型可以为福特客户带来越来越刺激的冒险，福特与Telenav正帮助此类客户确保网联导航技术能够在遥远的探险地继续正常工作，不像只要在蜂窝网络范围之外就无法工作的智能手机地图应用一样。(图片来源：福特)网联汽车和定位服...
绝对原创：Flash弹出式导航条
09-17
把Flash制作的导航条加入到您的网站中会别一种风趣。 有时间的话下载一下，看看蛮不错的。 绝对原创。
基于JS代码实现导航条弹出式悬浮菜单
11-23
采用弹出式悬浮菜单，不但可以使网站的导航内容更加清晰，而且不影响页面的整体效果。运行本实例，如图1所示，当鼠标移动到一级导航菜单的标题上时，将弹出悬浮菜单显示该菜单对应的子菜单，鼠标移出时，将隐藏悬浮...
labview 的右键弹出式菜单例子
04-20
这是在labview下的一个右键弹出式菜单例子，有点用处啊
bootstrap响应式导航条模板使用详解（含下拉菜单，弹出框）
08-28
主要为大家详细介绍了bootstrap响应式导航条模板使用详解，含下拉菜单，弹出框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)
10-17
主要介绍了微信小程序MUI侧滑导航菜单,结合实例形式分析了微信小程序Popup弹出式,左侧不动，右侧滑动菜单相关实现技巧与注意事项,需要的朋友可以参考下
香蕉园机器人导航的激光与超声波组合测距方法研究.pdf
08-11
#资源达人分享计划#
几个好看实用的网站导航
09-20
几个好看实用的网站导航 自己辛苦整理 今天吐血 分享 哈哈 网站 导航 使用 好看
jQuery和css3全屏弹出式导航菜单特效插件
12-11
这是一款非常实用的jQuery和css3全屏弹出式导航菜单特效插件。该插件的顶部导航条可以随时通过鼠标唤出，点击导航条上的导航主按钮，会弹出半透明的全屏导航菜单，该菜单非常方便实用。
泡沫弹出框式的侧边导航菜单
12-10
javascript泡沫弹出框式的侧边导航菜单
侧面弹出式菜单
05-31
侧面弹出式菜单
各大导航网站分享来啦
MiaChen的博客
07-02 3万+
【合集】设计师网址导航 https://hao.uisdc.com/ 小牛导航 http://super-nb.com pmtodo https://pmtodo.cn/ 还有众多网站分享，在我的看板上面，大家自取 https://web.banlikanban.com/kanban/60cab47db371922617b39af6/欢迎查看板栗看板「设计必备网站&网址&公众号推荐」 搜索 公举号 碰妞 有更多精彩哟~ 本文由博客一文多发平台 OpenWrite 发布！ ...
3D导航栏
orange_girls的博客
06-06 5981
3D导航栏
Banana Pro GPS模块连接教程
daniren的博客
05-08 4100
大家好，最近折腾banana pro，想到用香蕉派的GPS模块来定位，参考了树莓派GPS的教程，下面记录一下调试过程。本教程适用于banana pro && usb或串口通信的GPS模块 1.硬件选择和连接 网上的GPS模块有很多，有串口通信的，也有转成USB的，使用USB的同学可以直接插在usb口，我使用的是串口通信的GPS模块。 Banana Pro模块上引出了4个串口，分别为u
日常学习网站
折翼孤雁
03-26 2万+
机器视觉/图像处理类网站 1)halcon学习网Halcon学习网 2)51halcon: Halcon视觉之家-51Halcon专注于机器视觉技术 3)重码网：重码网-halcon-merlic-visionpro-python-java-vc-c#-wpf-vb-delphi-PowerBuilder-Matlab-android-ios-windows phone-微信-php-jsp-perl-asp-asp.net-ruby-go-opencv-labview-Matrox Mil-Sh..
showModalBottomSheet 悬浮式导航栏
最新发布
09-05
### 回答1： `showModalBottomSheet` 是一个 Material Design 风格的组件，它可以创建一个悬浮式的导航栏。通过调用该组件，可以在屏幕底部弹出一个卡片式的窗口，显示一些额外的信息或者提供一些额外的操作。 在 Flutter 中，使用 `showModalBottomSheet` 组件可以很方便地实现悬浮式导航栏。使用该组件需要传入一个BuildContext对象和一个Widget对象，Widget对象可以是任何自定义的Widget，用于显示在弹出的窗口中。同时，该组件还可以设置一些属性，如窗口的高度、背景颜色等。 示例代码如下： ```dart void _showModalBottomSheet(BuildContext context) { showModalBottomSheet<void>( context: context, builder: (BuildContext context) { return Container( height: 200.0, color: Colors.white, child: Center( child: Text('这是一个悬浮式导航栏'), ), ); }, ); } ``` 在上面的示例中，我们创建了一个高度为200的悬浮式导航栏，背景颜色为白色，其中包含一个居中显示的文本“这是一个悬浮式导航栏”。 ### 回答2： showModalBottomSheet 是一种悬浮式导航栏的实现方式。它是一个常见的界面设计，用于在应用程序中展示一系列选项供用户选择。悬浮式导航栏通常以半透明的背景出现在屏幕底部，覆盖在其他内容上方。 使用 showModalBottomSheet，开发者可以在底部弹出一个具有可滚动选项的面板。此面板可以包含多个条目，每个条目可以用于执行特定的操作或显示相关的信息。该悬浮式导航栏可以通过用户手势或其他交互操作进行关闭。 showModalBottomSheet 的一个常见应用是在应用中展示底部菜单。例如，当用户需要选择操作或过滤内容时，开发者可以使用 showModalBottomSheet 在屏幕底部显示一个选项列表。这样，用户可以快速方便地选择所需的操作，而无需离开当前界面。 悬浮式导航栏的优点是它不会打断用户的工作流程。由于它显示在屏幕的底部，用户不需要离开当前界面来查看或选择选项。与传统的对话框相比，它提供了更好的用户体验和流畅度。 总而言之，showModalBottomSheet 是一种常见的悬浮式导航栏实现方式，可以在应用程序中提供方便快速的选项选择体验，同时不打断用户的工作流程。 ### 回答3： showModalBottomSheet 是一个悬浮式导航栏组件，它在应用程序的底部显示一个可滑动的面板，提供了导航和展示额外内容的功能。 使用该组件可以实现以下效果：当用户点击应用程序底部的某个按钮或触发某个事件时，一个悬浮式面板会从屏幕底部滑出，并覆盖主要内容。该面板通常包含一组导航选项，如菜单、筛选器或导航按钮，供用户选择或进行跳转。 showModalBottomSheet 组件提供了多种属性和参数，可以根据需要进行配置。一些常见的属性包括：标题、内容、导航选项、按钮等。可以通过这些属性来自定义面板的外观和功能。 该组件可以方便地用于需要展示额外信息或提供导航选项的场景。例如，在一个电子商务应用中，可以使用 showModalBottomSheet 来展示商品筛选器，用户可以通过选择不同的筛选条件来快速找到所需商品。在一个社交媒体应用中，可以使用该组件来展示用户的个人资料和操作按钮。 总之，showModalBottomSheet 是一个功能强大且灵活的悬浮式导航栏组件，通过它可以实现在应用程序底部展示额外内容和提供导航选项的效果，提升用户体验和操作效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值