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

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

一佰互联网站开辟设想(www.taishanly.com) 颁布发表日期 2020-05-27 22:13:57 阅读数: 120

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

16
04月
专业网站扶植-若何采办合适本身的贸易法式版本

第一,挑选甚么样的法式说话良多站长都喜好方向PHP和.NET的法式说话上,都喜好挑选这类的网站法式做站,比方说织梦之类的。乃至一些底子不懂程... >>概况

07
05月
收集金融成长的手艺背景

计较机手艺、收集手艺,通讯手艺、网站设想的飞速成长,为收集银行的呈现及其成长供给了手艺根本和市场需要前提,同时也给金融办事业带来了加倍剧烈的... >>概况

28
03月
来了——若何对待测试版颁布发表的10项首要功效?

简介:2019年1月15日,抖音进行了交际产物的颁布发表会,正式颁布发表进级了抖音外部的私信功效,推出了自家的自力交际产物“多闪”,多闪的定位是促进... >>概况

14
05月
SEO和SEM的区分是甚么_巅云建站

SEO和SEM的区分?良多初中计营销行业的伴侣能够会对良多专业名词发生良多猜疑,作者刚入行的时辰被和sem这两个词搅扰了好久,由于良多人都有... >>概况

高端网站扶植

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

德律风:

023-85725751
建站

产物

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