JS-仿京东导航（JS版）

最新推荐文章于 2024-01-04 18:27:18 发布
最新推荐文章于 2024-01-04 18:27:18 发布
阅读量2.3k 收藏 11
点赞数 1
分类专栏： JavaScript 文章标签： css 导航 优化 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Annaluo/article/details/77963756
版权

效果描述：相比前面的CSS版本，此版本做了很多优化和其他效果，比如文字悬浮和图片悬浮



具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类导航一级菜单制作（JS版）</title>
    <style type="text/css">
        body{
            padding:0;
            font-size: 10px;
        }
        .topmenu{
            display: block;
            width: 220px;
            border: 2px solid #e4393c;
            margin: 0;
            padding: 0;
        }
        .toptitle{
            height: 40px;
            line-height: 40px;
            text-align: left;
            font-size: 11px;
            font-weight:bold;
            color: White;
            background: #e4393c;
            padding-left: 20px;
        }
        .topmenu li{
            height: 30px;
            line-height: 30px;
            font-size: 11px;
            list-style-type: none;
            text-align: left;
            padding-left: 8px;
            z-index: 3;
            background-image: url(images/右箭头.jpg);
            background-repeat: no-repeat;
            background-position: right;
        }
        .topmenu li a{
            text-decoration:none ;
            color: #313131;
        }
        .topmenu li a:hover{
            text-decoration: underline;
            font-weight: bold;
            color: #e4393c;
        }
        .topmenu .lihover{/* 鼠标移动到上面时，应用的样式*/
            background-image:none;
            border: 1px solid #DDD;
            border-right: 0;
            height: 60px;
            border-left: 4px solid #e4393c;//当鼠标放上去时左边边框变化
            box-shadow:0 0 8px #DDD ;//IE
            -moz-box-shadow:0 0 8px #DDD;//firefox
            -webkit-box-shadow:0 0 8px #DDD;//chrome


        }

        .topmenu .lihover .submenu{/* 悬浮层应用的样式*/
            display: block;
        }
        .topmenu .lihover span{/*白色小方框的样式 */
            background: white;
            display: inline-block;
            z-index: 20;
            width: 20px;
            height: 60px;
            float: right;
            position: relative;
        }
        .topmenu .lihover b{
            display: block;
            height: 30px;
            line-height: 30px;
            font-weight: normal;
            font-size: 10pt;
        }
        .submenu{
            display: none;
            width: 715px;
            left: 220px;
            position: absolute;
            top: 40px;
            border: 1px solid #DDD;
            z-index: 4;
            background: white;
            box-shadow:0 0 8px #DDD ;//IE
        -moz-box-shadow:0 0 8px #DDD;//firefox
        -webkit-box-shadow:0 0 8px #DDD;//chrome
        }
        .leftdiv{

            float: left;
            width: 490px;
            margin: 5px;
        }
        .rightdiv{

            float: left;
            width: 200px;
            margin: 5px;
        }

        .leftdiv dl{
            display: block;
            border-bottom:  1px solid #EEE;
            padding-bottom: 6px;
            overflow: hidden;
        }
        .leftdiv dl dt{
            display: block;
            float: left;
            width: 60px;
            text-align: right;
            height: 22px;
            line-height: 22px;
            padding-right: 6px;
        }
        .leftdiv dl dt a{
            color: #e4393c;
            font-weight: bold;
            text-decoration: underline;
            font-size: 10pt;
        }
        .leftdiv dl dd{
            display: block;
            overflow: hidden;
        }
        .leftdiv dl dd a{
            display: block;
            float: left;
            border-left: 1px solid #CCC;
            color: #737373;
            font-size: 9pt;
            padding: 0 8px;
            height: 14px;
            line-height: 14px;
            margin: 4px 0;
        }
        .rightdiv dl dd{
            margin: 3px 0;
        }
        .rightdiv dl dt{
            color: #e4393c;
            font-weight: bold;
            font-size: 10pt;
        }
        .rightdiv dl dd a{
            font-size: 9pt;
            color: #737373;
            line-height: 22px;
        }
        .rightdiv dl dd a:hover{
            color: #737373;
            font-weight: normal;
        }
        .topmenu li b{
            display: none;
        }

        /*悬浮图片溢出效果*/
        .rightPic{
            position: relative;
            right: -35px;
            bottom: -20px;
        }
    </style>
</head>
<body>
<script>
    window.onload = function () {
        var Lis = document.getElementsByTagName("li");
        for (i = 0;i<Lis.length;i++){
            Lis[i].i = i;
            Lis[i].onmouseover = function () {
                this.className = "lihover";
                var h0 = (this.i - 1)*30 +42;
                var y = this.getElementsByTagName("div")[0].offsetHeight;
                var h = this.getElementsByTagName("div")[0].style.top;
                if(h<h0){/* 当悬浮层内容很少的时候，让它不在顶部*/
                    this.getElementsByTagName("div")[0].style.top = h0 + "px";
                }
                if( y>550){/* 当悬浮层内容太多，下面显示不完，让它向上显示*/
                    this.getElementsByTagName("div")[0].style.top ="3px";
                }
            }
            Lis[i].onmouseout = function () {
                this.className  ="";

            }
        }
    }
</script>

<ul class="topmenu">
    <div class="toptitle">
        全部商品分类
    </div>
    <li><a href="#">图书、音像、数字产品</a><span></span>
        <!--仿苏宁悬浮文字 -->
        <b>
            <a href="#">文学</a>
            <a href="#">经管</a>
            <a href="#">畅读VIP</a>
        </b>
        <div class="submenu">
            <div class="leftdiv">
                <dl>
                    <dt><a href="#">电子书</a> </dt>
                    <dd>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#">电子书</a> </dt>
                    <dd>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#">电子书</a> </dt>
                    <dd>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                    </dd>
                </dl>
            </div>
            <div class="rightdiv">
                <dl>
                    <dd>
                        <a href="#">
                            <img src="images/1.jpg" width="194" height="70">
                        </a>
                    </dd>
                    <dd>
                        <a href="#">
                            <img src="images/2.png" width="194" height="70">
                        </a>
                    </dd>
                </dl>
                <dl>
                    <dt>推荐品牌</dt>
                    <dd>
                        <a href="#">美的官方···</a>
                    </dd>
                    <dd>
                        <a href="#">美的官方···</a>
                    </dd>
                    <dd>
                        <a href="#">美的官方···</a>
                    </dd>
                    <dd>
                        <a href="#">美的官方···</a>
                    </dd>
                </dl>
                <!--悬浮图片 -->
                <img class="rightPic" src="images/4.png">
            </div>
        </div>
    </li>
    <li><a href="#">家用电器</a><span></span>
        <div class="submenu">
            <div class="leftdiv">
                <dl>
                    <dt><a href="#">111</a> </dt>
                    <dd>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#">222</a> </dt>
                    <dd>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#">333</a> </dt>
                    <dd>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                    </dd>
                </dl>
            </div>


    <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>

    <li><a href="#">汽车用品</a><span></span>
        <div class="submenu">
            <div class="leftdiv">
                <dl>
                    <dt><a href="#">444</a> </dt>
                    <dd>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#">555</a> </dt>
                    <dd>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#">666</a> </dt>
                    <dd>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                        <a href="#">免费</a><a href="#">小说</a><a href="#">励志</a>
                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>
                    </dd>
                </dl>
            </div>
    <li><a href="#">母婴、玩具乐器</a></li>
    <li><a href="#">食品饮料、酒类、生鲜</a></li>
    <li><a href="#">营养保健</a></li>

</ul>
</body>
</html>


Annaluo
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS-仿京东固定导航栏案例
m0_47559177的博客
10-12 634
需求：当页面滚动到秒杀模块，导航栏自动滑入，否则滑出 JavaScript 获取HTML距离浏览器的距离: document.documentElement,scrollTop 获取元素距离父节点的距离: 元素.offsetTop <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con
制作京东购物车导航栏，包含html+css完整代码
m0_74937643的博客
05-18 255
css样式完整代码，布局用到display：flex。效果图，所有下拉列表均可显示。
vue--仿京东到家底部导航
小白小白从不日别的博客
09-08 739
前期准备： 通过 vue create xxx 创建vue项目，这里在创建时我们勾选上 router 选项，自动创建路由 在src/assets目录里新建css文件，将css初始化文件放入，并在main.js里通过import引入(import'./assets/css/common.css') 在阿里巴巴图标库下载对应的导航图标，然后放入src/assets目录里： 再在main.js里引入(import'./assets/font/iconfont.css') 项...
h5页面---仿京东移动端分类导航栏,点击左侧导航栏按钮切换内容,点击左侧按钮自动跳转到页面顶部
m0_72929120的博客
01-04 884
【代码】h5页面---仿京东移动端分类导航栏,点击左侧导航栏按钮切换内容,点击左侧按钮自动跳转到页面顶部。
竖向导航-仿京东左侧导航大类效果
dibengcheng6179的博客
06-25 201
完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea...
HTML+CSS静态项目--仿京东首页
N374471906的博客
10-03 2707
这次一共写了四个页面，都是模仿京东的页面来写的，主要写了首页，商品页面，商品详情页面以及用户注册四个页面，源代码可参照https://github.com/Labef-Peppa/imitate-jd.git 地址直接git-clone下载，下载后的jingdong文件夹就是整个所有html+css文件以及所有的图片文件 具体效果图如下： 整个四个静态页面编写过程中可以改进的地方以及不会写的还有新学的知识： 1.首先网页的标志图片，要使用ico文件，可以在bitbug.com网站生成ico文
微信小程序--仿京东UI样式顶部导航栏
Dreawer微信小程序联盟
09-01 4031
我们先来看看京东的效果 分析 上端导航栏可以放置多个分类，可滑动点击导航栏最右端按钮可以查看所有分类，同时背景模糊内容部分右拉跳转到另外的分类点击分类时导航栏的滑动部分自动滑动到合适的位置 我的实现 代码展示： js /** * categoryView.js - 分类页面 */var fakeData = require('../../c
-仿京东商城楼梯式导航定位菜单
weixin_34007906的博客
05-02 229
实现京东商城楼梯式导航定位菜单：滚动定位菜单项和点击定位菜单项！     涉及知识点：find()、parent()、offset(）、scroll()等jQ函数，请自觉复习各种函数！ html代码：   1 &lt;!-- 导航菜单 --&gt; 2 &lt;div id="menu"&gt; 3 &lt;ul&gt; 4 &lt;li...
ElasticSearch分布式搜索引擎从入门到实战应用（实战篇-仿京东首页搜索商品高亮显示）
一宿君
11-29 1472
ElasticSearch分布式搜索引擎从入门到实战应用（实战篇-仿京东首页搜索商品高亮显示）1、熟悉SpringBoot集成ElasticSearch 1、熟悉SpringBoot集成ElasticSearch elasticsearch官方指导文档：https://www.elastic.co/guide/index.html 推荐使用REST风格操作es，所以可以直接根据REST Client客户端官方指导文档即可： https://www.elastic.co/guide/en/elastic
仿京东楼层导航区域效果
2201_75667318的博客
02-23 151
我是一个前端小白写的有些地方不太好 还请希望大家多多包涵。舞台再大你不上台 永远只是一个过客 所以说加油吧！使用原生js写出楼层导航效果
uniapp-仿京东商城首页、分类页实现
最新发布
06-20
uniapp是基于Vue.js构建的，它扩展了Vue的特性和API，使其更适合移动应用开发。因此，开发者需要具备Vue的基本知识，包括组件化开发、指令、计算属性、侦听器等。此外，uniapp引入了自己的组件库，如view、button、...
javascript仿京东导航左侧分类导航下拉菜单效果
11-27
在本文中，我们将探讨如何使用JavaScript来实现一个类似于京东或淘宝商城左侧分类导航的下拉菜单效果。这个功能常用于电子商务网站，以提供用户友好的导航体验，方便他们快速找到感兴趣的商品类别。以下是对实现这一...
微信小程序开发-仿京东首页案例源码.zip
11-21
小程序支持JavaScript、WXML（Weixin Markup Language）和WXSS（Weixin Style Sheets）语言，它们分别负责逻辑处理、结构定义和样式设置。 2. **WXML与WXSS**： WXML类似于HTML，用于构建用户界面的结构。在这个...
JS实现仿京东淘宝竖排二级导航
10-25
本文给大家分享一段使用原生Javascript实现的仿京东淘宝竖排二级导航的代码，非常的实用，有需要的小伙伴参考下
如何让body背景图自适应浏览器窗口大小
热门推荐
Anna
10-19 3万+
这两天真的被背景图问题弄的头大，一会是浏览器窗口大小改变，背景图就重复，或者是浏览器有滚动条，或者加上no-repeat之后，重复的部分就变成空白！！！真的是一个头，两个大！！！！！ 现在终于找到解决方法了，不仅不重复，还没有滚动条，简直整个人都解放了，哈哈哈！下面附上代码，其实是特别简单的问题，但某些时候，我们就是会被一些很小的问题困扰很久...... html{
JS-实现类似于高考倒计时的倒计时时差
Anna
09-12 2907
效果描述：设置的结束时间为2017/12/5，其中用了Math.ceil函数把得到的结果向上取整。 具体代码如下： 倒计时 window.onload = function () { var curtime = new Date();//获取当前时间 var endtime = n
JS-表格隔行变色效果
Anna
09-15 2061
效果描述：使特定的表格隔行变色。 代码如下： 表格隔行变色 第一行第一行 第二行第二行 第三行第三行 第四行第四行 第五行第五行 第六行第六行 var item = document.getElementById("tb"); //获取I
JS获取HTML样式
Anna
08-23 1926
有些时候我们需要给页面添加动态效果，那么久需要获取一些HTML元素，但是很多时候都会遇到一些bug，得不到我们想要的结果，那么这个时候就需要用JS函数来解决了。 效果说明：随着页面打开的时间，DIV会越变越小，直到最后只有边框。文字“font-size”会以1PX为单位，不断增大。 效果图如下： 具体代码如下： 获取样式 #
vue 回到顶部
05-27
要在 Vue 中实现回到顶部，你可以使用以下两种方法之一： 1. 利用 Vue 自带的指令 v-scroll-to，在点击按钮时滚动到顶部。 在模板中添加一个按钮，并绑定一个点击事件： ```html <template> <div> <!-- 模板内容 --> <button @click="scrollToTop">回到顶部</button> </div> </template> ``` 在 Vue 组件的 methods 中定义 scrollToTop 方法，使用 v-scroll-to 指令将页面滚动到顶部： ```javascript <script> import { scrollTo } from 'vue-scroll-to' export default { methods: { scrollToTop() { scrollTo(0, 500) } } } </script> ``` 2. 利用原生 JavaScript，在点击按钮时滚动到顶部。 在模板中添加一个按钮，并绑定一个点击事件： ```html <template> <div> <!-- 模板内容 --> <button @click="scrollToTop">回到顶部</button> </div> </template> ``` 在 Vue 组件的 methods 中定义 scrollToTop 方法，使用原生 JavaScript 将页面滚动到顶部： ```javascript <script> export default { methods: { scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }) } } } </script> ``` 以上两种方法都可以实现回到顶部的功能，具体使用哪一种取决于你的项目需求和个人喜好。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值