小米商城顶部导航栏

最新推荐文章于 2021-11-14 20:44:39 发布
最新推荐文章于 2021-11-14 20:44:39 发布
阅读量643 收藏 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 3566
HTML+CSS实现小米官网顶部导航栏
小米商城顶部导航栏练习
qq_43987112的博客
05-24 789
小米商城顶部导航栏练习
一、前端学习之HTML+CSS编写静态页面-欧莱雅首页
Serven
04-04 1568
本人也是前端入门小白 先从HTML开始进阶到Css 注:使用Css重点的思路是 将页面大体分成多个盒子,在每个盒子内调节边距、添加相应的样式、最后用div去调用定义的样式组成相应的页面 对于没有学习Css的同学这样说可能是有点迷 但是学完Css后 写一个Demo就会明白其中的奥秘. 下面就是我实际编写的案例: 注:此案例也是我从CSDN中去找的 1....
前端入门篇（二十九）顶部菜单栏问题记录
安之ccy的博客
02-04 662
1.文字靠上 解决办法：设置高度和行高，使高度与背后的黑条一致（40px） .topbar-nav { height: 40px; line-height: 40px; } 2.消除因代码排版而带来的空格 （在选项中间加竖线，竖线与选项要分开，鼠标移动到选项时，竖线不应跟着改变样式，所以用span标签括起竖线，另外加样式） 如果只是简单添加，会因为代码编写的换行，使竖线与下一个选项间隔一个空格 解决：先设置导航栏字号为0，再设置span的高度、行高、字号、margin css文件：
微信小程序-顶部导航栏TopBar.zip
10-08
顶部导航栏，可以滑动，使用swiper组件和swiper-item组件来完成，做了封装，性能很好，大家可以下载来看看
小米商城项目实战(一)顶部导航栏
gf_lvah的博客
06-16 4565
顶部导航栏需求 项目结构 HTML代码 # 编辑文件index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米闪购-小米商城</title> <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> &
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的背景属性、伪类选择...
小米商城css样式表
weixin_44701378的博客
02-28 1411
idhtml, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select { margin: 0; padding: 0; } *{box-sizing: border-box;} html, body { min-height: 100%; } body ...
xx闪购——顶部的菜单栏
iheyu(一个新手小白女PHP初学者)
01-08 340
一.做小米商城的菜单栏： 1.页面结构： 1.1.在html的body里面有一个 div 包裹着所有 内容 与 控制背景和高度； 1.2.在用1个 div 标签 限制宽度和整体居中； 1.3.在用1个 div 标签 让文字靠最左侧 ——>用另1个 div 标签 让文字靠最右侧； <!DOCTYPE html> <html lang="zh"> <he...
html+css实现小米商城
a1353206432的博客
11-14 7088
此项目为刚学完html和css时个人完成，在各方面还是有一些瑕疵，供大家学习使用. 实现效果： 项目文件列表： 图片素材都可以在小米商城找到 html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt...
web前端练手小项目——仿照小米商城
代码海中一粒米
03-23 9162
大部分是静态页面，使用的js知识只有一点点 实现的效果： 实现的html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...
前端入门篇（三十）logo导航栏问题记录
安之ccy的博客
02-05 858
1.链接内加背景图片，需先将链接标签设置为块元素，并设置宽高 否则无法显示出图片 css文件： .header-log a { display: block; width: 55px; height: 55px; background: #ff6700 url(../img/img.png) no-repeat 50% 50%; } 更详细的解释：链接 2.获取嵌套标签下的class，注意空格 html文件： <div class="header">
十、VueJs 填坑日记之在项目中使用Amaze UI
词语大杂烩
11-29 4423
获取妹子UI（Amaze UI） 下载地址：http://amazeui.org/getting-started 点击上方绿色的按钮，我们来下载最新版的妹子UI，下面有配套的文档和编辑器，我们只是把妹子UI集成到vuejs项目中，所以我们只需要妹子UI就可以了。   整理妹子UI文件（Amaze UI） 将下载下来的AmazeUI-2.7.2.zip，我们解压到一个目
TopBar的用法
weixin_44160470的博客
01-06 970
private final Button left_button; private final Button rightButton; private final TextView text_title; private OnLeftAndRightClickListener listener; //自定义接口 public void setOnLeft...
小米闪购首页实战（HTML+CSS+JS）
dweblover的博客
02-14 6945
1.效果图如下 2.CSS代码如下（style.css） body,ul,li { margin:0; padding:0; } body { height:2500px; } ul { list-style:none; } /*解决高度塌陷*/ .container::before,.container::after,.clearfix::before,.clearfix::aft...
小米商城顶部导航栏的二维码css样式怎么写
03-07
对于这个问题，我可以回答。小米商城顶部导航栏的二维码css样式可以通过以下代码实现： .qrcode { position: relative; display: inline-block; margin-left: 10px; width: 20px; height: 20px; } .qrcode img { position: absolute; top: -120px; left: -120px; width: 260px; height: 260px; opacity: ; transition: opacity .3s ease-in-out; } .qrcode:hover img { opacity: 1; } 这样可以实现鼠标悬停在二维码上时显示二维码图片的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值