左侧固定菜单，右侧浮动菜单样式示例代码

最新推荐文章于 2024-04-22 21:56:44 发布
最新推荐文章于 2024-04-22 21:56:44 发布
阅读量7.2k 收藏 3
点赞数
分类专栏： Web前端
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
   <title>左侧固定，右侧浮动的菜单样式</title>
   <script src="/Scripts/jquery-1.10.2.min.js"></script>
   <script>
       $(function () {
           $(".left_nav dd").hover(function () {
               $(".nav_right", this).show();


           });
           $(".left_nav dd").mouseleave(function () {
               $(".nav_right", this).hide();
           });


       });
   </script>
   <style type="text/css">
      /*初始化样式*/
      * {
         margin:0;
         padding:0;
         font-size:18px;
      }
      /*设置超链接样式*/
      a {
        text-decoration:none;
        color:#333;
        }
      a:link{
        text-decoration:none;
      }
      a:active{
        text-decoration:none;
      }
      a:hover{
        text-decoration:none;
      }
        a:visited{
        text-decoration:none;
      }
        /*设置底层视图的样式*/
        .left_nav{
          width:120px;
          height:auto;/*高度设置为自动，则根据视图的内容的高度来自动适应高度*/
          padding:5px;
          position:fixed;
          left:10px;
          top:10px;
          margin:10px 0px 0px 10px;
          z-index:777;
          background-color:red;
        }
        /*设置自定义列表的标题样式*/
        .left_nav dl dt{
          width:80px;
          height:22px;
          line-height:22px;
          background:url("/Image/long.png") no-repeat 12px center #e6238f;
          padding-left:40px;
          color:#fff;
          margin-bottom:4px;
        }
        /*设置自定义列表的行样式*/
        .left_nav dl dd{
            width:128px;
            height:30px;
            position:relative;
        }
        /*设置自定义列表中的行中层的样式*/
        .left_nav dl dd .nav_right{
            width:300px;
            height:auto;
            overflow:hidden;
            position:absolute;
            left:125px;
            top:0px;
            padding:0px 5px 10px 5px;
            display:none; 
            border:1px solid #ccc;
            background-color:#fff;


        }
        /*设置自定义列表中的行中层的链接的样式*/
        .left_nav dl dd .nav_right a{
            width:110px;
            height:20px;
            line-height:20px;
            padding-left:40px;
            margin-top:0px;
            color:#666;
            background-color:#fff;
            background:url("/Image/nav_right_bg.png") no-repeat 20px center;
            display:block;
            float:left;
            white-space:nowrap;/*该属性设置为该值时，则文本不会换行，直到遇到<br>才换行*/
            text-overflow:ellipsis;/*该属性设置为该值时，则超出文本框的内容用省略号代替*/
             -o-text-overflow:ellipsis;
             /*overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号；-o-text-overflow: ellipsis针对Opera；而宽度的设定主要是针对IE6；*/
             overflow:hidden;
        }
         /*设置自定义列表中的行中层中当鼠标悬浮时链接标签的样式*/
         .left_nav dl dd .nav_right a:hover{
            width:110px;
            height:20px;
            line-height:20px;
            background:url("/Image/nav_right_bg2.png") no-repeat 20px center #e6238f;
            text-align:left;
            color:#fff;
            padding-left:40px;
         }
         /*设置自定义列表的左边链接的样式*/
         .left_nav dl dd a.nav_left{
           width:107px;
           height:29px;
           line-height:29px;
           background:url("/Image/left_nav_dt_bg.png") no-repeat 105px center #E0E0E0;
           padding-left:13px;
           display:block;
           white-space:nowrap;
           text-overflow:ellipsis;
           -o-text-overflow:ellipsis;
           overflow:hidden;
           border-bottom:1px solid #fff;
           color:#3c4347;
         }
         /*设置自定义列表的左边当鼠标悬浮在链接上时的样式*/
         .left_nav dl dd a.nav_left:hover{
            background:url('/Image/left_nav_dt_bg2.png') no-repeat 105px center #e6238f;
            color:#fff;
         }
         /*清除浮动*/
         .clear {
         clear:both;
         }
   </style>
</head>
<body>
    <div class="left_nav">
        <dl>
            <dt>分类</dt>
            <dd><a href="javascript:" class="nav_left">玉石</a><div class="nav_right"><a href="javascript:">木雕</a><a href="javascript:">木雕</a><a href="javascript:">木雕</a></div></dd>
            <dd><a href="javascript:" class="nav_left">刺绣</a><div class="nav_right"><a href="javascript:">222222</a></div></dd>
            <dd><a href="javascript:" class="nav_left">玻璃工艺</a><div class="nav_right"><a href="javascript:">33333</a></div></dd>
            <dd><a href="javascript:" class="nav_left">青铜器</a></dd>
            <dd><a href="javascript:" class="nav_left">雕刻</a></dd>
            <dd><a href="javascript:" class="nav_left">金属工艺</a></dd>
            <dd><a href="javascript:" class="nav_left">陶瓷</a></dd>
            <dd><a href="javascript:" class="nav_left">手工绘画</a></dd>
            <dd><a href="javascript:" class="nav_left">特种工艺</a></dd>
        </dl>   
    </div>
    <p style="margin-top:50px;margin-left:150px">fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
</body>
</html>
中情
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery页面滚动左侧悬浮固定导航菜单代码
08-13
"jQuery页面滚动左侧悬浮固定导航菜单代码"就是一个实现这种效果的技术方案，它结合了JavaScript库jQuery、HTML结构以及CSS样式来创建一个功能完备的导航菜单。 首先，jQuery是一个轻量级的JavaScript库，它简化了...
小圆点菜单
01-03
首先，"浮动菜单"的设计理念是提供一种不占用太多屏幕空间的交互方式。小圆点作为一个触发器，通常位于屏幕边缘，这样不会干扰用户的主视区。用户可以轻松地通过单击或长按小圆点来触发隐藏的菜单。这种设计尤其适用...
div浮动窗口_【CSS】浮动和下拉菜单
weixin_39871378的博客
11-29 594
浮动CSS 的 Float(浮动)，会使元素向左或向右移动，其周围的元素也会重新排列。Float(浮动)，往往是用于图像，但它在布局时一样非常有用。浮动属性：clear：指定不允许元素周围有浮动元素。值：left、right、both、none、inheritfloat：指定一个盒子(元素)是否可以浮动。值：left、right、none、inherit如果图像是右浮动，下面的文本流将环...
html右侧浮动菜单,HTML+CSS：css元素浮动详解，使用浮动制作导航栏菜单
weixin_29051811的博客
05-31 5781
原标题：HTML+CSS：css元素浮动详解，使用浮动制作导航栏菜单 今天这篇文章我们来说一下css的浮动属性(float)，给块状元素添加float属性可以使其转变为行内元素，也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。(1)float使用语法css的float主要有3个属性值none、left、right，默认为none；具体的使用如下所...
浮动的4个案例详解：网易云音乐列表/导航，淘宝banner区，文字环绕
最新发布
u013179804的博客
04-22 614
了解并实践了浮动以后，基本就可以完成大多数非动态元素过多的网站布局了，比如，网易云音乐，淘宝，腾讯新闻，公众号等。这篇文，主要来写 4 个浮动布局的实例。为了让你更容易了解，我们这次只主要说大体布局，先不聊太多内部填充细节。那就开始吧。其实呢，网页做多了，很多同类网站的布局都是比较相似的。比如，上述我举例的几个大网站。最后，这里只是提供了一个布局小框架，很多内部细节需要多多练习，布局就是一个框嵌套一个框，认识到这点，网站布局就入门了。熟能生巧，多多练习是王道。OK，本文完。
菜单固定 页面滚动 效果
yuan_jie
11-27 1922
在一个单页面设置一个主菜单，当页面滚动时主菜单位置固定在页面窗口中不动，或左或右，或上或下。当单击菜单项时，页面滚动到菜单对应的内容区，当页面滚动到预定内容位置时，对应的菜单项变为当前选中样式。 此效果可以应用在一些内容比较长的单页设计，本文将介绍使用JjQuery和css来实现这一效果，demo中分别有菜单居左、居右及底部效果，点击demo看效果： 查看演示DEMO下载源码
Html,CSS导航浮动弹出菜单
EnskDeCode
02-28 4993
Html,CSS导航浮动弹出菜 , 单代码如下 , 直接另存为.html文件可运行 <html> <head> <title>导航浮动弹出菜单</title> <style> div{ border-radius:10px; }.menu_bt_h{ width:200px; height:50px; cursor:pointer; background
DIV+CSS仿京东右侧固定悬浮图标导航栏特效-悬浮伸缩
qq_34753923的博客
07-18 1万+
效果图： （直接截的静态图，图标实际上是类似京东首页的伸缩效果的。） HTML部分代码： &lt;div class="toolbars"&gt; &lt;ul&gt; &lt;li class="jdvip"&gt; &lt;i&gt;&lt;/i&gt; &lt;a class="tool
微信小程序左滑动显示菜单功能的实现
08-27
在示例代码中，这部分使用了`<view>`组件来构建布局，通过CSS类对样式进行定义，如`page-bottom`和`page-top`来区分上下层。 2. **事件绑定**： - `bindtap`事件用于处理用户的点击行为。例如，`open_list`函数是...
超过一定高度出现左右浮动导航及底部固定导航代码悬浮漂浮
11-19
标题"超过一定高度出现左右浮动导航及底部固定导航代码悬浮漂浮"涉及到的是一个特定的网页设计实现方式，即当用户滚动页面到一定高度后，导航栏会从页面的一侧（通常为左侧或右侧）浮出，并且在页面底部有一个固定的...
超过一定高度出现左右浮动导航及底部固定导航代码
06-02
左右浮动导航通常指的是在屏幕两侧（左侧或右侧）固定显示的菜单。这种布局方式可以充分利用屏幕边缘的空间，提供快速的导航选项。而底部固定导航则是指当用户滚动页面时，导航栏会停在页面底部，始终保持可见，即使...
js左侧菜单列表源码
05-09
js实现的左侧菜单列表 没有伸缩效果 但因为看样式挺好的，所以就上传了 有需要的同学可以看一下
页面左侧下拉菜单
06-12
页面左侧下拉菜单
左侧右侧悬浮客服代码
06-20
淘宝左侧分类，以及右侧悬浮客服代码的代码，需要的自己下载
js左侧导航栏
10-27
js左侧导航栏
左侧菜单栏控制右侧页面内容切换
01-18
本demo所需技术：jQuery+Bootstrap 本demo所用工具：IDEA 本demo主要实现功能： 1. 左侧菜单栏切换右侧页面内容 2. boostrap弹框内容的显示
【vue】vue动态展示左侧菜单
小朋友的博客
04-26 1万+
VUE动态展示左侧菜单
7种方法实现CSS左侧固定，右侧自适应布局
热门推荐
菜菜的博客
12-26 3万+
左侧内容固定，右侧自动占满屏幕布局是开发中常见的布局，通常可见于一些管理后台：左侧展示菜单栏，右侧展示管理内容。 今天整理了7种实现这种布局的方法： 一：float+bfc ，左侧宽度不需要固定，但父级容器宽度需大于左侧宽度，否则右侧被挤压无法展示 /*左浮动固定宽度，右边盒子overflow:hidden触发bfc，使其不与浮动盒子区域重叠，因此会重新...
使用jquery编写右侧浮动导航菜单
06-13
以下是使用 jQuery 编写右侧浮动导航菜单的示例代码： HTML 代码： ```html <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值