京东导航栏的实现

最新推荐文章于 2024-07-24 20:47:06 发布
最新推荐文章于 2024-07-24 20:47:06 发布
阅读量881 收藏 5
点赞数
分类专栏： HTML+CSS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/124166788
版权

效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="../reset.css" />
    <link rel="stylesheet" href="../font/css/all.css" />
    <style>
      /* 解决高度塌陷 */
      .clearfix::before,
      .clearfix::after {
        content: "";
        display: table;
        clear: both;
      }
      body {
        font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial,
          Hiragino Sans GB, "宋体", sans-serif;
      }
      .top-bar-wrapper {
        height: 30px;
        width: 100%;
        background-color: #e3e4e5;
        /* 设置行高，使文字垂直居中 */
        line-height: 30px;
        border-bottom: 1px solid #ddd;
      }
      .top-bar {
        width: 1000px;
        margin: 0 auto;
        /* background-color: burlywood; */
        /* 为city-list提供参照 */
        position: relative;
      }
      .top-bar a,
      .top-bar span,
      .top-bar i {
        color: #999;
        text-decoration: none;
      }
      .top-bar a:hover,
      .top-bar a.hightlight {
        color: #f10215;
      }
      .location {
        float: left;
        /* background-color: tomato; */
      }
      .location .fas {
        color: #f10215;
        font-size: 14px;
      }

      .location .city-list {
        width: 200px;
        height: 436px;
        background-color: white;
        border: 1px solid rgb(204, 204, 204);
        display: none;
        /* 绝对定位，使之不占用父元素位置 */
        position: absolute;
        z-index: 999;
        top:31px;

        /* 阴影 */
        box-shadow: 0 2px 2px rgb(0,0,0,0.3);
      }
      /* 应该把悬浮效果给location外层容器,父元素 */
      .location:hover .city-list {
        display: block;
      }
      .current-city{
        padding: 0px 10px;
        position: relative;
        z-index: 1000;
        border: 1px solid transparent;
        border-bottom: none;
      }
      .location:hover .current-city{
        background-color: white;
        border: 1px solid rgb(204, 204, 204);
        border-bottom: none;
        /*  为了遮住下面的元素 */
        padding-bottom: 1px;
      }

      .shortcut {
        float: right;
      }
      .shortcut .line {
        width: 1px;
        height: 10px;
        background-color: #999;
        /* 上下居中，左右拉出外边距 */
        margin: 12px 12px 0px;
      }
      .shortcut li {
        float: left;
      }
    </style>
  </head>
  <body>
    <!-- 外围容器 -->
    <div class="top-bar-wrapper">
      <!-- 内围容器 -->
      <div class="top-bar clearfix">
        <!-- 左侧菜单 -->
        <div class="location">
          <div class="current-city">
            <i class="fas fa-map-marker-alt"></i>
            <a href="javascript:;">北京</a>
          </div>

          <!-- 放置城市列表 -->
          <div class="city-list"></div>
        </div>
        <!-- 右侧菜单 -->
        <ul class="shortcut">
          <li>
            <a href="javascript:;">您好，请登录</a>
            <a href="javascript:;" class="hightlight">免费注册</a>
          </li>

          <li class="line"></li>
          <li>
            <a href="javascript:;">我的订单</a>
          </li>

          <li class="line"></li>
          <li>
            <a href="javascript:;">我的京东</a>
            <i class="fas fa-angle-down"></i>
          </li>

          <li class="line"></li>
          <li>
            <a href="javascript:;">京东会员</a>
          </li>

          <li class="line"></li>
          <li>
            <a href="javascript:;" class="hightlight">企业采购</a>
            <i class="fas fa-angle-down"></i>
          </li>

          <li class="line"></li>
          <li>
            <span>客户服务</span>
            <i class="fas fa-angle-down"></i>
          </li>

          <li class="line"></li>
          <li>
            <span>网页导航</span>
            <i class="fas fa-angle-down"></i>
          </li>

          <li class="line"></li>
          <li>
            <span>手机京东</span>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>
_洋
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue实现nav导航栏的方法
08-28
vue实现nav导航栏的方法 vue实现nav导航栏的方法是指在vue项目中实现导航栏的方法。导航栏是每一个网页项目都少不了的组件，每一个项目都需要实现导航栏的功能。通过原始的方法基本上都是可以写出来的。但是要写出...
HTML+CSS+JavaScript：实现京东官网固定导航栏
lbcbjtlhmjq的博客
07-29 1124
在京东官网首页，只要页面滚动到京东秒杀倒计时的位置，顶部的导航栏就会自动出现且固定在窗口最上方，如下图我们将模仿京东官网的效果，做一个简易的固定导航栏，如下图。
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
京东移动端分类页面侧导航栏实现
热门推荐
云
04-08 5万+
【代码】京东移动端分类页面侧导航栏实现。
京东右边导航栏
fdsal的博客
10-07 1018
京东右边导航栏 悬浮到上面的时候变色，移开恢复正常 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
html：制作简易京东导航栏
astar2022的博客
06-30 3612
又是让人头秃的一天！
京东导航条.zip csshtml练习
07-28
在“京东导航条”这个练习中，我们需要用CSS来实现以下几点： 1. **布局**：使用`display`属性（如`flex`或`grid`）来实现水平排列的导航项，确保它们在不同屏幕尺寸下都能正确对齐。 2. **颜色和背景**：通过设置`...
京东商城导航源码.zip
10-19
- **搜索功能**：导航栏通常集成了搜索框，用户可以输入关键词查找商品。源码会包含搜索框的实现和与后端接口的交互逻辑。 4. **动态加载与异步通信**： - **AJAX**：为了提供流畅的用户体验，导航数据可能通过...
京东分类导航html
03-25
1. **悬浮导航**：这种导航栏始终保持在屏幕的一侧（通常是左侧），即使用户滚动页面，导航也会固定在屏幕顶部或底部，确保用户随时可以访问分类。这种设计提高了用户的导航效率，无需不断滚动回到页面顶部寻找分类...
京东js页面.zip
03-30
仿京东右侧导航栏，可以点击打开购物车，很好看的滑动效果，可以根据代码进行自定义，蛮好看的。
京东新版侧栏jquery导航特效代码
03-20
京东新版侧栏jquery导航是一款仿2013京东新版侧栏导航效果代码，适合用于电子商务类网站或栏目较多的网站使用。
仿京东导航栏
07-24
仿京东导航栏,仿京东导航栏,仿京东导航栏仿京东导航栏
HTML练习
Kerryliuyue的博客
03-17 216
京东顶部导航条 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东顶部导航条</title> <!--引入重置样式表--> <link rel="stylesheet" href="./reset.css"> <!--引入图标字体--> <link r
小程序京东首页底部导航栏代码
weixin_42398640的博客
11-02 2030
“tabBar”: { “selectedColor”: “#eb6830”, “list”: [ { “pagePath”: “page/home/index”, “iconPath”: “image/home.png”, “selectedIconPath”: “image/home-hl.png”. “text”: “首页” }, { “pagePath”: “page/home/index...
写一个京东最顶部的导航条
qq_42999126的博客
07-18 2537
效果图 如下： 下拉框的效果： 鼠标移入以后会有一个框显示出来 结构代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东顶部
HTML+CSS简单实现京东顶部导航栏
重生之我是泰勒
06-30 6076
html+css 实现京东顶部导航栏
仿京东html右侧侧导航菜单,【分享】自己做了个仿京东的导航栏，
weixin_30653101的博客
06-03 655
该楼层疑似违规已被系统折叠隐藏此楼查看此楼ul{width:90%;list-style:none;}li{float:left;width:5%;background-color:rgb(228,59,62);color:white;padding:12px;text-align:center;font-weight:bold;}li:hover{background-color:rgb(16...
前端第六篇笔记（p76~p89）
m0_62497122的博客
02-06 486
文章目录字体族（p76）图标字体简介（p77）iconfont（p79）行高（p80）字体的简写属性（p81）文本的水平和垂直对齐（p82）其他的文本样式（p83）text-decorationwhite-space京东导航条（p84~p86）背景（p88~89）background-repeatbackground-positionbackground-clipbackground-originbackground-size 字体族（p76） 字体相关的样式 color font-size em 相当于当
【CSS】CSS3 新特性
最新发布
小秀的博客
07-24 194
CSS Grid Layout 是一种二维布局系统，允许你在水平和垂直方向上创建复杂的布局。Flexbox 提供了一种更加高效的方式来布局、对齐和分配容器内项目的空间。CSS3 动画允许你创建复杂的动画效果，而无需使用 JavaScript。CSS3 增强了媒体查询的能力，允许你根据多种设备特性来应用样式。CSS3 过渡效果允许你平滑地在两个属性值之间进行动画过渡。CSS3 引入了更多的选择器，如属性选择器、伪类选择器等。：允许你根据元素的属性或属性值来选择元素。属性允许在元素上添加阴影效果。
pc端京东顶部导航栏变色代码
11-06
PC端京东顶部导航栏变色的代码可以使用HTML、CSS和JavaScript来实现。 首先，在HTML中创建顶部导航栏的结构，例如： ``` <nav id="topNav"> <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> </ul> </nav> ``` 接下来，在CSS中设置导航栏的样式，包括背景色、文字颜色等： ``` #topNav { background-color: #fff; /* 默认背景色 */ } #topNav ul { list-style: none; margin: 0; padding: 0; display: flex; } #topNav li { margin-right: 20px; } #topNav li a { text-decoration: none; color: #333; /* 默认文字颜色 */ } #topNav li.active { background-color: #e4393c; /* 选中项背景色 */ } #topNav li.active a { color: #fff; /* 选中项文字颜色 */ } ``` 最后，在JavaScript中添加交互逻辑，通过给选中的导航项添加一个"active"类来改变样式： ``` <script> var navItems = document.querySelectorAll("#topNav li a"); for (var i = 0; i < navItems.length; i++) { navItems[i].addEventListener("click", function() { var currentItem = document.querySelector("#topNav li.active"); if (currentItem) { currentItem.classList.remove("active"); } this.parentNode.classList.add("active"); }); } </script> ``` 这样，当点击导航项时，会给点击的导航项添加"active"类，从而改变其背景色和文字颜色，达到顶部导航栏变色的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值