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

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

一佰互联网站开辟设想(www.taishanly.com) 宣布日期 2020-06-19 15:51:21 阅读数: 100

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

07
04月
京东外部材料:超好用的用户休会晋升模子 -

用户休会一向是咱们在产物设想中频频夸大的题目,那末咱们应当若何晋升用户休会呢?颠末名目中不时的摸索与研讨,连系几个体例论,咱们整合出了一套用... >>概况

04
04月
微信小法式若何完成教培行业的小本投入 和庞大

简介:此篇文章首要和小火伴们分享的是微信对小法式的流量接口上“厚爱”和微信小法式开辟了浩繁的营销功效的先容。微信对小法式的厚爱不只表现在为... >>概况

10
04月
进阶常识!超周全的标记体系设想总结 - 网页

王M争:明天这篇文章是对产物中的标记体系做的一个清算阐发,外面触及到的内容比拟杂,但愿能够赞助到大师。标记体系写这篇文章的启事是我比来常常在... >>概况

11
04月
UI设想师必备!最全的加载动画网站Prelo

UI设想师在任务进程傍边不免会碰到一些界面设想以外的细节,比方Loading动画,或是转场动画等,明天保举的一个网站,便是一个Loading... >>概况

高端网站扶植

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

德律风:

023-85725751
建站

产物

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