html實現(xiàn)蜂窩菜單的示例代碼
發(fā)布時間：2023-08-01 16:33:10 作者：江湖人稱波哥 
我要評論
我要評論本文主要介紹了html實現(xiàn)蜂窩菜單的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
效果圖
CSS樣式
@keyframes _fade-in_mkmxd_1 {
0% {
filter: blur(20px);
opacity: 0
}
to {
filter: none;
opacity: 1
}
}
@keyframes _drop-in_mkmxd_1 {
0% {
transform: var(--transform) translateY(-100px) translateZ(400px)
}
to {
transform: var(--transform)
}
}
._examples_mkmxd_3 {
margin-top:200px;
position: relative;
width:1000px;
height: 640px;
transition: transform .15s ease-out;
filter: drop-shadow(0 4px 18px rgba(0,0,0,1));
--grid-width: 140px;
left: 50%;
transform: translate(-50%, 0px);
}
._examples_mkmxd_3 div {
position: relative;
transition: filter .25s ease-out;
animation: _fade-in_mkmxd_1 .35s cubic-bezier(.215,.61,.355,1) var(--delay) backwards;
}
._examples_mkmxd_3 div:hover {
filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
z-index: 3;
}
._examples_mkmxd_3 a {
position: absolute;
--transform: perspective(75em) rotateX(0deg) rotateZ(-0deg) translate(calc(var(--x) * 100%), calc(var(--y) * 86.67%)) scale(1.145);
transform: var(--transform);
animation: _drop-in_mkmxd_1 .35s cubic-bezier(.215,.61,.355,1) var(--delay) backwards;
transition: transform .25s ease-out;
/*clip-path: polygon(50% 100%,93.3% 75%,93.3% 25%,50% 0%,6.7% 25%,6.7% 75%);*/
/*clip-path: polygon(25% 93.3%,75% 93.3%,93.3% 50%,75% 6.7%,25% 6.7%,6.7% 50%);*/
clip-path: polygon(25% 87%,75% 87%,98.3% 50%,75% 13%,25% 13%,1.7% 50%);
}
._examples_mkmxd_3 a:hover{
transform: var(--transform) translateZ(10px) scale(1.1);
}
._examples_mkmxd_3 img {
aspect-ratio: 1;
object-fit: cover;
height: 64px;
width: 64px;
transform: translate(-50%, 40px);
left: 50%;
position: absolute;
/*filter: drop-shadow(2px 2px 0px #00BFFF);*/
}
img {
max-width: 100%;
height: auto;
display: block;
}
*{
box-sizing: border-box;
}
.menu-box{
display: block;
width:200px;
height:200px;
/*background:rgba(84, 109, 231,.6);*/
background: mediumpurple;
position: relative;
}
.menu-text{
color: #fff;
position: absolute !important;
top: 120px;
left: 50%;
font-weight: bold;
transform: translate(-50%, 0px);
/*filter: drop-shadow(2px 2px 0px #00BFFF);*/
font-size: 16px;
text-align: center;
}
.back-img{
width: 64px !important;
position: absolute;
left: 50%;
transform: translate(-50%, 20px);
/*filter: drop-shadow(2px 2px 0px #00BFFF);*/
}
a:hover+.menu-box .menu-text{
color: #00BFFF;
filter: drop-shadow(2px 2px 0px #fff);
}html
<div class="_examples_mkmxd_3" >
<div v-for="(item,index) in tempData" :key="index" :style="{'--delay': item.showTime}">
<a href="#" :title="item.name" @mouseenter="menuEnter(item)" @mouseleave="menuLeave(item)" @click="menuClick(item,tempData)" :style="{'--x': item.x, '--y': item.y}">
<span class="menu-box" :style="{'background':item.color}">
<img v-if="item.name!=='上一層'" :src="item.imgPath?item.imgPath:'../img/navigation/火車站.png'" >
<img v-if="item.imgPath&&item.name==='上一層'" :src="item.imgPath" class="back-img">
<span class="menu-text">{{item.name}}</span>
</span>
</a>
</div>
</div>vue代碼
new Vue({
el:'#app',
data(){
return {
menuData:[
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系統(tǒng)',img:'',children:[
{
x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系統(tǒng)',img:'',children:[
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系統(tǒng)',img:'',children:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系統(tǒng)',img:'',children:[]
},
]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系統(tǒng)',img:'',children:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系統(tǒng)',img:'',children:[]
},
]
},
{
x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系統(tǒng)',img:'../img/navigation/火車站.png',children:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系統(tǒng)',img:'',children:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系統(tǒng)',img:'',children:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系統(tǒng)',img:'',children:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系統(tǒng)',img:'',children:[]
},
{
x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系統(tǒng)',img:'',children:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系統(tǒng)',img:'',children:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系統(tǒng)',img:'',children:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系統(tǒng)',img:'',children:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系統(tǒng)',img:'',children:[]
},
{
x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系統(tǒng)',img:'',children:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系統(tǒng)',img:'',children:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系統(tǒng)',img:'',children:[]
},
],
tempData:[],
colors:[
'#1874CD', '#3CB371', '#FF7F50', '#CD1076', '#CD00CD',
'#1C86EE', '#00FF7F', '#FF8C00', '#EE1289', '#EE00EE',
'#1E90FF', '#00FF00', '#FFA500', '#FF1493', '#FF00FF',
]
}
},
watch:{
menuData(){
this.initCoor()
}
},
mounted(){
let _this = this
this.getUser()
// this.getMenuData()
this.tempData = this.menuData
this.initCoor()
this.timer = setInterval(function(){
_this.localDate = _this.dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss')
},1000)
},
destroyed(){
clearInterval(this.timer)
},
methods:{
menuEnter(item){
if(item.name==='上一層')
return
this.msgData = item
this.msgShow = true
},
menuLeave(item){
this.msgShow = false
},
showTime(item){
if(item.name==='上一層')
return '0s'
return Math.random()+'s'
},
menuClick(item,parant){
let arr =[]
if(item.name==='上一層'){
this.changeMenu(item.children)
}else if(item.children.length>0){
arr.push({x:0,y:0,path:'',name:'上一層',imgPath:'../img/navigation/icon-返回上一級.png',children:parant})
item.children.forEach(t=>{
arr.push(t)
})
this.changeMenu(arr)
}else{
window.location.href = item.path
}
},
changeMenu(data){
let _this = this
this.tempData = []
setTimeout(function(){
_this.tempData = data
_this.initCoor()
},10)
},
initCoor(){
this.tempData.forEach((t,index)=>{
t.color = this.colors[index]
t.showTime = this.showTime(t)
if(!t.children){
t.children = []
}
if(index<5){
t.y=0
t.x=index*0.86
if(index%2!==0){
t.y += 0.5
// t.x = (index-1)+0.8
}
}else if(index>4&&index<10){
t.y=1
t.x=(index-5)*0.86
if(index%2===0){
t.y += 0.5
// t.x = (index-1)+0.8
}
}else if(index>9&&index<15){
t.y=2
t.x=(index-10)*0.86
if(index%2!==0){
t.y += 0.5
// t.x = (index-1)+0.8
}
}
})
},
}
})到此這篇關(guān)于html實現(xiàn)蜂窩菜單的示例代碼的文章就介紹到這了,更多相關(guān)html蜂窩菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
HTML+CSS實現(xiàn)導(dǎo)航條下拉菜單的示例代碼
菜單欄在很多地方都可以用到，尤其是帶下拉的菜單欄，本文主要介紹了HTML+CSS實現(xiàn)導(dǎo)航條下拉菜單，具有一定的參考價值，感興趣的可以了解一下2021-07-27
HTML+CSS 實現(xiàn)頂部導(dǎo)航欄菜單制作
導(dǎo)航對于任何網(wǎng)站都很重要，本文主要介紹了HTML+CSS 實現(xiàn)頂部導(dǎo)航欄菜單制作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-03
這篇文章主要介紹了html滑動仿懸浮球菜單效果的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-02- 這篇文章主要介紹了Html屏蔽右鍵菜單和左鍵劃字功能的示例的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-09
使用HTML+CSS實現(xiàn)鼠標劃過的二級菜單欄的示例
本篇文章主要介紹了使用HTML+CSS實現(xiàn)鼠標劃過的二級菜單欄的示例，非常具有實用價值，需要的朋友可以參考下2017-09-14- 可輸入下拉菜單，不可思議是不是， 本例通過一些方法實現(xiàn)這個不可能的事情，感興趣的朋友可以參考下2014-09-06
- 這篇文章主要介紹了html下拉菜單提交后如何保留選中值而不返回默認值，方法雖簡單，但比較實用，需要的朋友可以參考下2014-09-06
