小米商城顶部导航栏

最新推荐文章于 2023-03-28 21:46:29 发布
最新推荐文章于 2023-03-28 21:46:29 发布
阅读量645 收藏 2
点赞数
文章标签： jquery struts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60696519/article/details/120415103
版权
  • 模拟需求数据
  • 用JQuery动态的绑定数据 

  • <header>
				<!-- 导航栏top部分   开始-->
				<div class="topbar">
					<div class="topbar-nav">
						<div class="top_nav-left">
							<a rel="nofollow" href="">小米商城</a>
							<span class="sep">|</span>
							<a rel="nofollow" href="">MIUI</a>
							<span class="sep">|</span>
							<a rel="nofollow" href="">Tol</a>
							<span class="sep">|</span>
							<a rel="nofollow" href="">云服务</a>
							<span class="sep">|</span>
							<a rel="nofollow" href="">天星数科</a>
							<span class="sep">|</span>
							<a rel="nofollow" href="">有品</a>
							<span class="sep">|</span>
							<a rel="nofollow" href="">小爱开放平台</a>
							<span class="sep">|</span>
							<a rel="nofollow" href="">企业团购</a>
							<span class="sep">|</span>
							<a rel="nofollow" href="">资质证照</a>
							<span class="sep">|</span>
							<a rel="nofollow" href="">协议规则</a>
							<span class="sep">|</span>
							<a rel="nofollow" href="">
								下载app

							</a>
							<span class="sep">|</span>
							<a rel="nofollow" href="" target="_blank">智能生活</a>
							<span class="sep">|</span>
							<a rel="nofollow" class="">Select Location</a>
						</div>
						<div class="land">
							<a href="#">登陆</a>
							<span class="spn">|</span>
							<a href="#">注册</a>
							<span class="spn">|</span>
							<a href="#">消息通知</a>
							<div class="top-shop">
								<a href="#"><span class="iconfont icon-gouwuche"></span>购物车（0）</a>
							</div>
						</div>
					</div>
				</div>
				<!-- 导航栏top部分   结束-->
				<nav >
					<div class="nav_log">
							<a href="#"><img src="img/logo-mi2.png" class="logo-mi2"></a>
					</div>
					<div class="nav">
						<ul>
							<li class="blank-li"><a href="#"></a></li>
							<!-- <li><a href="#">小米手机</a></li>
							<li><a href="#">Redmi红米</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></li> -->
						</ul>
					</div>
					<div class="search">
						<input type="search" class="search-box" id="search" name="search" value="笔记本">
						<button type="button" class="iconfont icon-sousuo search-submit"></button>
					</div>
				</nav>
			
			<!-- 隐藏导航栏 -->
			<section class="hide">
				<div id="phone" class="navigationBar">
					<ul>
						<!-- <li><a href="">
								<div class="figure figure-thumb">
									<img src="./img/img/miu4.png">
								</div>
								<div class="title">Xiaomi MIX 4</div>
								<p class="price">4999元起</p>
							</a>
						</li>
						<li><a href="">
								<div class="figure figure-thumb">
									<img src="./img/img/miu5.png">
								</div>
								<div class="title">Xiaomi MIX 4</div>
								<p class="price">4999元起</p>
							</a>
						</li>
						<li><a href="">
								<div class="figure figure-thumb">
									<img src="./img/img/miu6.png">
								</div>
								<div class="title">Xiaomi MIX 4</div>
								<p class="price">4999元起</p>
							</a>
						</li>
						<li><a href="">
								<div class="figure figure-thumb">
									<img src="./img/img/miu7.png">
								</div>
								<div class="title">Xiaomi MIX 4</div>
								<p class="price">4999元起</p>
							</a>
						</li>
						<li><a href="">
								<div class="figure figure-thumb">
									<img src="./img/img/miu8.png">
								</div>
								<div class="title">Xiaomi MIX 4</div>
								<p class="price">4999元起</p>
							</a>
						</li>
						<li><a href="">
								<div class="figure figure-thumb">
									<img src="./img/img/miu9.png">
								</div>
								<div class="title">Xiaomi MIX 4</div>
								<p class="price">4999元起</p>
							</a>
						</li> -->

					</ul>
				</div>
		

			</section>


</header>

    css部分

 

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style-type: none;
}

.clearfix::before,
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

#header {
	width: 100%;
}

/* 导航栏top部分 */
.topbar {
	background-color: #000000;
}

.topbar-nav {
	width: 1226px;
	height: 50px;
	margin: 0 auto;
	background-color: #000000;
	line-height: 50px;
	color: #323232;
	display: flex;
	justify-content: space-between;
}

.land,
.top-shop {
	display: inline-block;
}

.topbar a {
	font-size: 10px;
	color: #9e9e9e;
	text-align: left;
}

.topbar a:hover {
	color: #FFFFFF;
}

/* 	导航栏 开始*/
nav {
	width: 1226px;
	height: 100px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo-mi2 {
	width: 60px;
}

nav ul li {
	float: left;
	padding: 0 10px;
}

nav a {
	color: #000000;
}

nav a:hover {
	color: rgb(255, 106, 0);
}

.search input {
	width: 250px;
	height: 50px;
}

.search-box {
	box-sizing: border-box;
	border: #000000 1px solid;
}

.search-submit {
	margin-left: -6px;
	width: 50px;
	height: 50px;

}

/* //隐藏导航栏 */
.hide {
	width: 1920px;
	position: absolute;
	background-color: white;
	z-index: 99;
}

.navigationBar {
	display: flex;
	align-items: center;
	justify-content: space-around;
	box-shadow: 0 0px 1px gray;
}

.navigationBar ul {
	display: flex;
	justify-content: center;
	/* width: 1920px; */
		
}

.navigationBar ul>li>a .figure-thumb {
	width: 160px;
	height: 110px;
	margin: 0 auto 16px;
	text-align: center;
margin-top: 10px;
}

.navigationBar ul>li {
	width: 204px;
	height: 201px;
}

.navigationBar ul>li a .title {
	text-align: center;
	font-size: 12px;
	color: #000000;
}

.navigationBar ul>li>a .price {
	margin: 0;
	text-align: center;
	font-size: 12px;
	line-height: 20px;
	color: #ff6700;
}

js部分

 

$(() => {
	//适应浏览器屏幕可用宽度
    $('#app').css('width', (parseInt(window.screen.availWidth) - 16) + 'px');

    var categoryList = getCategoryList();
    showCategory(categoryList);
	

})


function getCategoryList() {
    var categoryList = [{
            categoryId: 10010,
            categoryName: '小米手机',
            productList: [{
                    productId: 1001001,
                    productImg: './img/img/miu4.png',
                    productName: 'Xiaomi Mix4',
                    productPrice: '4999'
                },
                {
                    productId: 1001003,
                    productImg: './img/img/miu5.png',
                    productName: 'Xiaomi Mix4',
                    productPrice: '4999'
                },
                {
                    productId: 1001004,
                    productImg: './img/img/miu6.png',
                    productName: 'Xiaomi Mix4',
                    productPrice: '4999'
                },
				{
				    productId: 1001005,
				    productImg: './img/img/miu7.png',
				    productName: 'Xiaomi Mix4',
				    productPrice: '4999'
				},
				{
				    productId: 1001006,
				    productImg: './img/img/miu8.png',
				    productName: 'Xiaomi Mix4',
				    productPrice: '4999'
				},
				{
				    productId: 1001007,
				    productImg: './img/img/miu9.png',
				    productName: 'Xiaomi Mix4',
				    productPrice: '4999'
				},
			
            ]
        },
        {
            categoryId: 10010,
            categoryName: 'Redmi手机',
            productList: [{
                    productId: 1001001,
                    productImg: './img/img/miu9.png',
                    productName: 'Redmi手机 Mix4',
                    productPrice: '4999'
                },
                {
                    productId: 1001001,
                    productImg: './img/img/miu9.png',
                    productName: 'Redmi手机 Mix4',
                    productPrice: '4999'
                },
                {
                    productId: 1001001,
                    productImg: './img/img/miu9.png',
                    productName: 'Redmi手机 Mix4',
                    productPrice: '4999'
                },
                {
                    productId: 1001001,
                    productImg: './img/img/miu9.png',
                    productName: 'Redmi手机 Mix4',
                    productPrice: '4999'
                },
                {
                    productId: 1001001,
                    productImg: './img/img/miu9.png',
                    productName: 'Redmi手机 Mix4',
                    productPrice: '4999'
                }
            ]
        },
        {
            categoryId: 10010,
            categoryName: '电视',
            productList: [{
                    productId: 1001001,
                    productImg: './img/img/tv1.png',
                    productName: '电视',
                    productPrice: '4999'
                },
                {
                    productId: 1001001,
                    productImg: './img/img/tv1.png',
                    productName: '电视',
                    productPrice: '4999'
                },
                {
                    productId: 1001001,
                    productImg: './img/img/tv1.png',
                    productName: '电视',
                    productPrice: '4999'
                }
            ]
        },
        {
            categoryId: 10010,
            categoryName: '笔记本',
            productList: [{
                    productId: 1001001,
                    productImg: './img/img/book.png',
                    productName: '笔记本',
                    productPrice: '4999'
                },
                {
                    productId: 1001001,
                    productImg: './img/img/book.png',
                    productName: '笔记本',
                    productPrice: '4999'
                },
                {
                    productId: 1001001,
                    productImg: './img/img/book.png',
                    productName: '笔记本',
                    productPrice: '4999'
                }
            ]
        },
        {
            categoryId: 10010,
            categoryName: '平板',
			productList: [{
			        productId: 1001001,
			        productImg: './img/img/pb.png',
			        productName: '平板',
			        productPrice: '4999'
			    },
			    {
			        productId: 1001001,
			        productImg: './img/img/pb.png',
			        productName: '平板',
			        productPrice: '4999'
			    },
			    {
			        productId: 1001001,
			        productImg: './img/img/pb.png',
			        productName: '平板',
			        productPrice: '4999'
			    }
			]
        },
        {
            categoryId: 10010,
            categoryName: '家电',
			productList: [{
			        productId: 1001001,
			        productImg: './img/img/bx.jpg',
			        productName: '家电',
			        productPrice: '4999'
			    },
			    {
			        productId: 1001001,
			        productImg: './img/img/bx.jpg',
			        productName: '家电',
			        productPrice: '4999'
			    },
			    {
			        productId: 1001001,
			        productImg: './img/img/bx.jpg',
			        productName: '家电',
			        productPrice: '4999'
			    }
			]
        },
        {
            categoryId: 10010,
            categoryName: '路由器',
			productList: [{
			        productId: 1001001,
			        productImg: './img/img/ly.png',
			        productName: '路由器',
			        productPrice: '4999'
			    },
			    {
			        productId: 1001001,
			        productImg: './img/img/ly.png',
			        productName: '路由器',
			        productPrice: '4999'
			    },
			    {
			        productId: 1001001,
			        productImg: './img/img/ly.png',
			        productName: '路由器',
			        productPrice: '4999'
			    }
			]
        },
        {
            categoryId: 10010,
            categoryName: '智能硬件',
        },
        {
            categoryId: 10010,
            categoryName: '服务',
        },
        {
            categoryId: 10010,
            categoryName: '社区',
        }




    ]

    return categoryList;

}
//绑定类别
function showCategory(categoryList) {
    categoryList.forEach(element => {
        $('.nav ul').append(function(){
            return '<li has-product="'+Boolean(element.productList)+'"><a href="#">' + element.categoryName + '</a></li>';
        })
        
    });
    //给li绑定鼠标移入事件
    $('.nav ul >li:not(:first)').mouseenter(function () {
     //清空商品列表
		$('.navigationBar >ul').empty();
	//获取当前分类的商品
        var productList=categoryList[$(this).index()-1].productList;
     //判断商品列表是否存在  
		if(productList){
			//填加模拟数据
            productList.forEach((value, index) => {
                var li = '<li>' +
                    '<a href="#" >' +
                    '<div class="figure-thumb">' +
                    '<img src="' + value.productImg + '" alt="">' +
                    '</div>' +
                    '<div class="title">' + value.productName + '</div>' +
                    '<div class="price">' + value.productPrice + '元起</div>' +
                    '</a>' +
                    '</li>';
                $('.navigationBar >ul').append(li);
            })
            $('.navigationBar').slideDown(500);
            
        }

    });
    //给头部容器绑定鼠标划过事件
    $('.hide').on(
        {
            'mouseover':function(e){
                var categoryElement=$('.navigationBar,.nav >ul>li[has-product="true"]');
                if(!$(e.target).is(categoryElement)&&!$(e.target).parents().is(categoryElement)){
                    $('.navigationBar').hide(100);
					
				
                }
				
				
            },
            'mouseleave':function () { 
                $('.navigationBar').hide(100);
            },
			
        }
    )

}

_小梁哥
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS实现小米官网顶部导航栏
重生之我是泰勒
07-01 3567
HTML+CSS实现小米官网顶部导航栏
用HTML和CSS写小米商城导航栏
cj1555640的博客
08-19 3400
Java学习第二十天开始做小米商城的首页
小米官网竖直导航栏html,手把手教你做小米商城顶部导航栏
weixin_35414437的博客
06-03 1925
手把手教你做小米商城顶部导航栏发布时间：2019-04-01 20:19,浏览次数：985<>手把手教你做小米商城顶部导航栏<>思路说明<>1 先确定清除基本的默认样式跟基本的css 样式/* 清除默认样式 */ * { margin: 0; padding: 0; } input { outline: none; border: 0; }/* 清除浮动的样式 ...
小米商城顶部导航栏练习
qq_43987112的博客
05-24 789
小米商城顶部导航栏练习
手把手教你做小米商城顶部导航栏
热门推荐
weixin_42839094的博客
04-01 1万+
手把手教你做小米商城顶部导航栏 思路说明 1 先确定清除基本的默认样式跟基本的css 样式 /* 清除默认样式 */ * { margin: 0; padding: 0; } input { outline: none; border: 0; } /* 清除浮动的样式 */ .clearfi...
仿写小米商城导航栏
weixin_56319791的博客
01-08 478
效果图 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
分析小米商城的导航栏的布局及其动画实现
qq_41672008的博客
05-20 5436
首先看看小米商城的导航栏，如图： 通过实际测试可以知道，服务和社区不属于下拉菜单，除了这两个，剩下的全是下拉菜单，想成了一个下拉菜单组，一旦鼠标进入下拉菜单组，那么就会有下拉效果，通过也有过渡效果，所以肯定有transition'属性，目测时间为0.3s左右，一旦鼠标离开下拉菜单组，那么下拉菜单就会收起来，这个比较直观，还有就是下拉菜单选项之间的切换几乎是没有过度效果的。 先来看看怎...
小米商城实战vue项目 03 顶部导航栏
maggie
04-07 849
完成初步的样式的编写，低层的footer比较简单，大致完成初步的App.vue中的顶部导航栏和底部的css的编写； <!-- * @Description: 项目根组件 * @Author: * @Date: 2020-04-07 * @LastEditors: * @LastEditTime: --> <template> <div i...
HTML小米官网导航栏设计
M18037112715的博客
03-28 601
天星数科企业团购有品小米官网小米商城小米影像云服务登录|注册
HTML+CSS实现小米官网顶部导航栏（代码与静态资源）
01-04
在本项目中，我们主要探讨如何使用HTML和CSS来实现类似小米官网的顶部导航栏。这个练习涵盖了网页设计的基础知识，包括结构化HTML元素、CSS样式表的应用以及静态资源的组织。 首先，让我们从HTML部分开始。HTML...
小米商城前端页面显示html设计
06-11
在小米商城页面，顶部导航栏通常包含多个链接，方便用户快速访问不同产品类别或服务。 5. **图像展示**：在商品展示中，标签用于插入图像。通过src属性指定图像源，alt属性提供替代文字，以便在图像无法加载时提供...
小米 下划线带子菜单导航栏
11-19
3. **导航栏**：导航栏是UI设计中的关键元素，它位于应用或网站的顶部，为用户提供主要的导航路径。小米的下划线带子菜单导航栏，不仅提供了清晰的导航，还保持了界面的简洁性，使得用户可以快速访问常用功能或浏览...
shopmarket_仿小米商城_
10-01
同时，顶部导航栏应包含搜索框、购物车、个人中心等常用功能，底部则放置公司信息、服务条款等链接。 3. **商品界面**：商品界面需提供详细的商品信息，包括图片、名称、价格、库存、规格等。采用瀑布流布局展示...
全新完美版仿小米商城网页源码.zip
06-18
在仿小米商城的源码中，你可以看到如何利用HTML和CSS构建一个可折叠的导航菜单，以及如何在用户滚动页面时固定顶部导航，以提供无缝的浏览体验。 对于网页中的图片和图标，开发者可能使用了CSS的背景属性、伪类选择...
chromedriver-mac-arm64_126.0.6474.0.zip
07-31
chromedriver-mac-arm64_126.0.6474.0.zip
chromedriver-mac-arm64_128.0.6548.0.zip
07-31
chromedriver-mac-arm64_128.0.6548.0.zip
MySQL查询加速器：利用Query Cache提升效率
07-31
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
Objective-C语言的基础教程.md
最新发布
07-31
Objective-C是一种面向对象的编程语言，是C语言的扩展。它主要用于苹果的iOS和macOS应用程序开发。
小米商城顶部导航栏的二维码css样式怎么写
03-07
小米商城顶部导航栏的二维码css样式可以通过以下代码实现： .qrcode { position: relative; display: inline-block; margin-left: 10px; width: 20px; height: 20px; } .qrcode img { position: absolute; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值