基于CSS實現(xiàn)網(wǎng)頁懸浮菜單效果
發(fā)布時間：2023-02-13 11:47:37 作者：水星記_ 
我要評論
我要評論平時我們在瀏覽網(wǎng)頁時，如下圖的導(dǎo)航欄已經(jīng)屢見不鮮了，當(dāng)鼠標(biāo)放上去時，右側(cè)隱藏的內(nèi)容就會慢慢平滑展開，非常美觀且實用，今天小編通過本文給大家分享基于CSS實現(xiàn)網(wǎng)頁懸浮菜單效果，感興趣的朋友一起看看吧
前言
平時我們在瀏覽網(wǎng)頁時，如下圖的導(dǎo)航欄已經(jīng)屢見不鮮了，當(dāng)鼠標(biāo)放上去時，右側(cè)隱藏的內(nèi)容就會慢慢平滑展開，非常美觀且實用，那你知道這種效果是怎么實現(xiàn)的嗎？下面我們就一起實踐一下。
如圖所示：
實現(xiàn)思路
- 首先我們需要把所有的導(dǎo)航欄通過
fixed屬性定位到網(wǎng)頁的右下角； - 設(shè)置
transition屬性將所有導(dǎo)航欄添加平滑的過渡效果； - 利用
right屬性將所有導(dǎo)航欄向右偏移； - 當(dāng)鼠標(biāo)觸摸某一個導(dǎo)航欄時，運用
hover屬性，將right的值設(shè)置為0px，配合之前說到的transition屬性讓其右側(cè)內(nèi)容平滑的展示出來即可。
話不多說，下面直接看源碼
完整源碼
<template>
<div class="parentBox">
<div class="contantsBox">
<div>
<span><img src="../assets/yuyue.png" /></span>
<span>預(yù)約體驗</span>
</div>
<div>
<span><img src="../assets/kefu.png" /></span>
<span>聯(lián)系客服</span>
</div>
<div>
<span><img src="../assets/fhdb.png" /></span>
<span>回到頂部</span>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.parentBox {
height: 100%;
background: gainsboro;
overflow: hidden;
overflow-y: auto;
.contantsBox {
div {
transition: all 0.7s;
position: fixed;
right: -127px;
width: 180px;
background: rgba(96, 96, 96, 0.6);
color: #fff;
padding: 8px 10px;
cursor: pointer;
display: flex;
align-items: center;
span:last-child {
margin-left: 16px;
}
img {
width: 32px;
height: 32px;
vertical-align: middle;
}
}
div:nth-child(1) {
bottom: 197px;
}
div:nth-child(2) {
bottom: 148px;
}
div:nth-child(3) {
bottom: 100px;
}
div:hover {
right: 0px;
cursor: auto;
span {
cursor: pointer;
}
}
div:not(:last-child) {
border-bottom: 1px solid #fff;
}
}
}
// 隱藏瀏覽器滾動條
::-webkit-scrollbar {
display: none;
}
</style>
拓展延伸
當(dāng)然，上面實現(xiàn)的操作只是一種展現(xiàn)形式，類似的功能在效果上可能大相徑庭，接下來帶大家一起看看下面這幾個案例實現(xiàn)的效果。
案例1
完整源碼
<template>
<div class="parentBox">
<div class="menusBox">
<p><span data-text='快速上手'>快速上手</span></p>
<p><span data-text="進(jìn)階用法">進(jìn)階用法</span></p>
<p><span data-text="開發(fā)指南">開發(fā)指南</span></p>
</div>
</div>
</template>
<style lang="less" scoped>
.parentBox {
padding: 50px;
height: 100%;
background: rgb(37, 34, 51);
.menusBox {
background: rgba(0, 0, 0, 0.4);
border-bottom: 1px solid rgba(241, 241, 241, 0.25);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4) inset;
border-radius: 16px;
width: 30%;
display: flex;
justify-content: space-around;
height: 50px;
margin: 0 auto;
overflow: hidden;
p {
cursor: pointer;
span {
text-transform: uppercase;
color: #fff;
margin-top: -50px;
transition: 0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4);
}
span:before {
content: attr(data-text);
/*直接使用data-text屬性的值*/
display: block;
color: rgb(173, 255, 43);
}
span:hover {
margin-top: 0;
}
}
p * {
display: inline-block;
font-size: 18px;
line-height: 50px;
}
}
}
</style>
效果圖
案例2
完整源碼
<template>
<div class="parentBox">
<div class="navBox">
<p>導(dǎo)航菜單</p>
<ul class="menuBox">
<li><span class="contnatBox">A</span></li>
<li><span class="contnatBox">B</span></li>
<li><span class="contnatBox">C</span></li>
<li><span class="contnatBox">D</span></li>
<li><span class="contnatBox">E</span></li>
<li><span class="contnatBox">F</span></li>
<li><span class="contnatBox">G</span></li>
<li><span class="contnatBox">H</span></li>
<li><span class="contnatBox">I</span></li>
</ul>
</div>
</div>
</template>
<style lang="less" scoped>
.parentBox {
height: 100%;
background: #74777b;
padding: 100px 0;
transform: translate3d(0, 0, 0);
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
span {
color: rgba(255, 255, 255, 0.6);
outline: none;
text-decoration: none;
-webkit-transition: 0.2s;
transition: 0.2s;
}
span:hover,
span:focus {
cursor: pointer;
color: #74777b;
text-decoration: none;
}
.navBox {
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
background: #fff;
margin: 70px auto;
position: relative;
cursor: pointer;
text-align: center;
font-size: 1.75em;
font-weight: bold;
color: cornflowerblue;
transition: 0.24s 0.2s;
.menuBox {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: -75px;
left: -75px;
border: 150px solid transparent;
cursor: default;
border-radius: 50%;
transform: scale(0);
transition: transform 1.4s 0.07s;
z-index: -1;
}
.menuBox li {
position: absolute;
top: -100px;
left: -100px;
transform-origin: 100px 100px;
transition: all 0.5s 0.1s;
}
.menuBox li span {
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50%;
background: #fff;
position: absolute;
font-size: 60%;
color: cornflowerblue;
transition: 0.6s;
}
.menuBox li span:hover {
background: rgba(255, 255, 255, 0.7);
}
}
.navBox:hover {
background: rgba(255, 255, 255, 0.8);
}
.navBox:hover .menuBox {
transition: transform 0.4s 0.08s, z-index 0s 0.5s;
transform: scale(1);
z-index: 1;
}
.navBox:hover .menuBox li {
transition: all 0.6s;
}
.navBox:hover .menuBox li:nth-child(1) {
transition-delay: 0.02s;
transform: rotate(85deg);
}
.navBox:hover .menuBox li:nth-child(1) span {
transition-delay: 0.04s;
transform: rotate(635deg);
}
.navBox:hover .menuBox li:nth-child(2) {
transition-delay: 0.04s;
transform: rotate(125deg);
}
.navBox:hover .menuBox li:nth-child(2) span {
transition-delay: 0.08s;
transform: rotate(595deg);
}
.navBox:hover .menuBox li:nth-child(3) {
transition-delay: 0.06s;
transform: rotate(165deg);
}
.navBox:hover .menuBox li:nth-child(3) span {
transition-delay: 0.12s;
transform: rotate(555deg);
}
.navBox:hover .menuBox li:nth-child(4) {
transition-delay: 0.08s;
transform: rotate(205deg);
}
.navBox:hover .menuBox li:nth-child(4) span {
transition-delay: 0.16s;
transform: rotate(515deg);
}
.navBox:hover .menuBox li:nth-child(5) {
transition-delay: 0.1s;
transform: rotate(245deg);
}
.navBox:hover .menuBox li:nth-child(5) span {
transition-delay: 0.2s;
transform: rotate(475deg);
}
.navBox:hover .menuBox li:nth-child(6) {
transition-delay: 0.12s;
transform: rotate(285deg);
}
.navBox:hover .menuBox li:nth-child(6) span {
transition-delay: 0.24s;
transform: rotate(435deg);
}
.navBox:hover .menuBox li:nth-child(7) {
transition-delay: 0.14s;
transform: rotate(325deg);
}
.navBox:hover .menuBox li:nth-child(7) span {
transition-delay: 0.28s;
transform: rotate(395deg);
}
.navBox:hover .menuBox li:nth-child(8) {
transition-delay: 0.16s;
transform: rotate(365deg);
}
.navBox:hover .menuBox li:nth-child(8) span {
transition-delay: 0.32s;
transform: rotate(355deg);
}
.navBox:hover .menuBox li:nth-child(9) {
transition-delay: 0.18s;
transform: rotate(405deg);
}
.navBox:hover .menuBox li:nth-child(9) span {
transition-delay: 0.36s;
transform: rotate(315deg);
}
}
</style>
效果圖
到此這篇關(guān)于基于CSS實現(xiàn)網(wǎng)頁懸浮菜單效果的文章就介紹到這了,更多相關(guān)css網(wǎng)頁懸浮菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS簡單實現(xiàn)網(wǎng)頁懸浮效果（對聯(lián)廣告）-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
css固定定位，即懸浮效果（例如對聯(lián)廣告），不用js，css中"position:fixed;"即可。 position:fixed; 以視口為包含塊，因此在瀏覽器窗口內(nèi)固定。 ie 6.0不支持，2008-10-17
這篇文章主要介紹了純CSS實現(xiàn)DIV懸浮的示例代碼(固定位置),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一2021-01-07
CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實現(xiàn)
這篇文章主要介紹了CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-17
這篇文章主要介紹了css實現(xiàn)懸浮客服效果,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-13
這篇文章主要介紹了css做個波浪懸浮球的實現(xiàn)方法的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-14
