巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站专提News

企业公司网站扶植:3标致的CSS Hover结果,您能够增加到您的Divi菜单

一佰互联网站开辟设想(www.taishanly.com) 宣布日期 2020-05-31 00:33:49 阅读数: 97

你的菜单是拜候者在拜候你的网站时最早看到的东西之一,以是你但愿它有一些气概,对吗?你固然晓得!这便是为甚么在明天的文章,我将分享三种体例,增加一些杰出的悬停结果到您的菜单与自界说CSS。

悬停结果应当是奥妙的,咱们想要视觉乐趣,但这不是网站最主要的局部,你的内容是。这些将增加适当的“弹出”到您的Divi导航。

咱们企业公司网站扶植不只会增加一个很好的悬停结果,并且还会有一些款式操纵于勾当页面的链接。比方,若是用户在主页上,那末菜单中的主页链接就会有一些小的设想处置。这是一个罕见的视觉标记,包含在网站上,以赞助提示用户他们在网站上的地位。这不是相对须要的,但这是一个很好的赞助用户休会。

主题定制法式设置

起首,对统统的款式,咱们将操纵头格局的默许设置。若是您方才装置了Divi,您不须要设置装备摆设这个设置,它应当主动设置为这个设置。

格式单线上面

在这个菜单款式中,咱们将增加一条从左到右的直线,它就在被悬停的菜单项上面。它还将在勾当页面链接的正下方设置一条静态行。

灵感

这是一个很是好的结果,能够很好地任务在几近任何范例的网站,加上编辑这类气概的代码,以转变色采和线宽是相称轻易的任何级别的用户。这是一个很是风行的悬停结果,我在网站上看到了良多年。我以为它的奥妙的处所使它如斯多用处,它能够用于房地产网站,和音乐家的网站和统统介于二者之间的。

实行

企业公司网站扶植将以下代码增加到子款式表或divi主题选项>通用>自界说CSS框:

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #15bf86; /*** COLOR OF THE LINE ***/
 height: 3px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

款式两层厚的“正方形”,上面是线条。

在这类菜单款式中,咱们将安排一个大的“块状”行,从鼠标悬停在菜单项下的菜单局部向下挪动。它还在勾当菜单链接上安排了一个块状框。

灵感

我在我开辟的一个名为Execute的Divi子主题上操纵了这类气概(我将链接到上面的演示,如许您就能够看到现实站点上的悬停)。从视觉上看,这并不像第一种气概那样奥妙,我以为挑选合适的站点来操纵它才是关头。这是主要的婚配任何范例的小设想细节,如悬停结果,以网站的全体感受。

实行

企业公司网站扶植将上面的代码增加到子主题的款式表中,或增加到Divi的自界说CSS框中的ThemeOptionsGeneral选项卡下。就编辑色采而言,变动很是轻易,但是若是您打算变动边框的宽度,您将发明还须要操纵CSS中的其余数字。

#top-menu li > a:hover {
 box-shadow: 0 10px 0 0 #F15A29 !important; /*** COLOR AND THICKNESS OF THE LINE ON HOVER ***/
 padding-bottom: 34px;
 opacity: 1 !important;
}
#top-menu li li a {
 padding-bottom: 6px !important;
}
#top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-item > a {
 border: 10px solid #F15A29; /*** COLOR AND THICKNESS OF THE BOX ***/
 padding: 10px;
 margin-bottom: -10px;
}

款式三背景黑色按钮

此菜单款式将菜单项转换为具备调和悬停色采的按钮。它还为勾当菜单链接供给了另外一种零丁的色采。

灵感

固然,这是受钮扣开导的。

</div>

<div style=TAG标签: 企业公司网站扶植:3标致的CSS   Hover结果   您能够增加到您的Divi菜单  

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已成功的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

相干消息more

12
04月
营销型网站扶植​的责任和色采的操纵

规画的责任营销型网站扶植规画是一种审美勾当,成功的规画著作类似泛泛都很艺术化。但艺术仅仅规画的手法,而并不是规画的责任。规画的责任是要竣事筹... >>概况

16
04月
专业网站扶植-甚么是团购网站,有甚么特色?

所谓团购网站便是团购的收集构造平台,便是互不熟悉的花费者,借助互联网的“网聚人的力量”来堆积资金,加大与商家的构和能... >>概况

09
04月
新年伊始,看看这20个最新的设想师作品集网站

EZEQUIEL BRUNI – 此次的20个设想师作品集网站是2月份傍边所出现出来的新站点,精挑细选以后筛出了这些具备代表新的... >>概况

24
01月
建站情势多样 哪一个最为合适

写字须要用笔,笔便是必备的东西,固然不是相对的,由于也能够用其余东西停止誊写,但是这个是泛博社会最认同的一种东西。就像网站扶植不是每一个企业必... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站