每天学一个jquery插件-多级的菜单

每天学一个jquery插件-多级的菜单

多级的菜单

想要把这玩意做成插件,但是我感觉好像纯粹的布局结构+css样式就能完成了

效果如下
每天学一个jquery插件-多级的菜单_第1张图片

代码部分


<html>
	<head>
		<meta charset="utf-8">
		<title>多级的菜单title>
		<style>
			*{
      
				margin: 0px;
				padding: 0px;
				font-size: 12px;
			}
			.menu1{
      
				background-color: gray;
				color: white;
				position: fixed;
				top: 0;
				bottom: 0;
				width: 100px;
				z-index: 9;
				right:calc( 100% - 20px) ;
				transition: all 0.2s linear;
			}
			.menu2{
      
				background-color: gray;
				color: white;
				position: fixed;
				top: 0;
				bottom: 0;
				width: 100px;
				z-index: 8;
				right:calc( 100% );
			}
			
			.menu3{
      
				background-color: gray;
				color: white;
				position: fixed;
				top: 0;
				bottom: 0;
				width: 100px;
				z-index: 8;
				right:calc( 100% );
			}
			.menu1:hover{
      
				right:calc( 100% - 100px) ;
			}
			.item1,.item2,.item3{
      
				width: 100px;
				height: 30px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.item1:hover>.menu2{
      
				right: calc(100% - 100px);
				transition: all 0.2s linear;
				right: calc(100% - 200px);
			}
			
			.item2:hover>.menu3{
      
				right: calc(100% - 200px);
				transition: all 0.2s linear;
				right: calc(100% - 300px);
			}
			.hover:hover{
      
				opacity: 0.8;
				cursor: pointer;
			}
		style>
	head>
	<body>
		<div class="menu1">
			<div class="item1 hover">
				<span class="text">一级菜单1span>
				<div class="menu2">
					<div class="item2 hover">
						<span class="text">一级菜单1-1span>
						<div class="menu3">
							<div class="item3 hover">
								<span class="text">一级菜单2-1-1span>
							div>
							<div class="item3 hover">
								<span class="text">一级菜单2-2-1span>
							div>
						div>
					div>
					<div class="item2 hover">
						<span class="text">一级菜单1-2span>
					div>
				div>
			div>
			<div class="item1 hover">
				<span class="text">一级菜单2span>
				<div class="menu2">
					<div class="item2 hover">
						<span class="text">一级菜单2-1span>
					div>
					<div class="item2 hover">
						<span class="text">一级菜单2-2span>
					div>
				div>
			div>
			<div class="item1 hover">
				<span class="text">一级菜单3span>
			div>
			<div class="item1 hover">
				<span class="text">一级菜单4span>
			div>
			<div class="item1 hover">
				<span class="text">一级菜单5span>
			div>
		div>
	body>
html>

思路解释

  • 看昨天的
  • 完事,休息

你可能感兴趣的:(每天学一个jquery插件,javascript,jquery)