ripro头像下拉栏美化教程

2020年1月9日21:43:55来源:八月素材网 评论 464

头像下拉美化菜单,修复部分css样式错位

效果展示一:

效果展示二:

注:本次美化教程基于“会员引导”功能制作,需与导航添加“开通会员”按钮,不然美化后按钮错位。

1. 主题目录:parts -> navbar.php 文件,在“<div class=”actions”>"后添加如下代码

<div title="加入VIP,免费下载全站素材" class="menu-head_you-container">
	<ul id="menu-head_you" class="menu">
		<li id="menu-item-967" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-967">
			<a href="vip"><i class="fa fa-diamond"></i> 开通会员</a>
		</li>
	</ul>
</div>

2.主题目录:assets -> css -> diy.css 文件,添加如下样式

/*nav设置开始*/
.navbar{height:72px;}
.header-gap{height:72px;}
.navbar .hhnavwarp:hover .Huserxiala{display:block;}
.navbar .menu-item>a{font-weight:400;}
.ripro-dark .navbar .menu-item>a{color:rgba(255,255,255,1);}
.sub-menu:before{content:'';width:20px;height:20px;border-radius:1px;background-color:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute;top:-5px;left:40px;z-index:0;}
.navbar .user-pbtn{height:80px;}
.navbar .user-pbtn:hover span{color:#f9b015;}
.navbar .login-btn{margin:0 20px;color:#4d555d;background-color:#ffffff00;font-size:14px;}
.navbar .actions>div+div{font-weight:700}
.navbar .actions>div+div{margin-left:5px;font-weight:700;}
.navbar .navbar-button,.off-canvas .canvas-close{background-color:#f7f7ff;border:1px solid #f7f7ff;color:#f9b015;background-image:none;-webkit-animation:none;}
.burger{background-color:#f7f7ff;border:1px solid #f7f7ff;color:#f9b015;}
.burger:before,.burger:after{background-color:#f9b015;}
.actions .burger:before,.actions .burger:after{content:none;}
.menu-head_you-container li a{margin:0 10px;color:#333;font-size:14px;}
.sub-menu li>a:hover:before,.sub-menu li.current_page_item>a:before,.sub-menu li.current-menu-item>a:before,.sub-menu li.current_page_ancestor>a:before,.sub-menu li.current-menu-ancestor>a:before,.sub-menu li.current-menu-parent>a:before{opacity:1;}
.sub-menu li>a:hover,.sub-menu li.current_page_item>a,.sub-menu li.current-menu-item>a,.sub-menu li.current_page_ancestor>a,.sub-menu li.current-menu-ancestor>a{color:#f9b015;padding-left:1.75rem;opacity:1;}
.sub-menu li a{font-size:.875rem;padding:.5rem 1rem .5rem 1.5rem;position:relative;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;}
.sub-menu li a:before{content:'';height:1px;width:10px;background-color:#f9b015;opacity:0;-webkit-transition:all 300ms linear 0ms;-khtml-transition:all 300ms linear 0ms;-moz-transition:all 300ms linear 0ms;-ms-transition:all 300ms linear 0ms;-o-transition:all 300ms linear 0ms;transition:all 300ms linear 0ms;position:absolute;left:.75rem;top:50%;-webkit-transform:translate(0%,-50%);-khtml-transform:translate(0%,-50%);-moz-transform:translate(0%,-50%);-ms-transform:translate(0%,-50%);-o-transform:translate(0%,-50%);transform:translate(0%,-50%);}
@media (min-width:750px){.module.slider .post{height:400px;}
.menu-head_you-container{display:block !important;}
.site-header .burger,.site-header .search-open,.site-header .login-btn,.site-header .tap-dark{margin-top:25px!important;}}
/*nav设置结束*/

美化样式一教程:

ripro头像下拉栏美化教程
请输入密码查看文章
扫一扫左侧二维码关注微信公众号
微信搜索"爱游博客"及"vipiu-net"
关注公众号并发送:6366 获取密码.
下载信息 资源名称:ripro美化图片 应用平台:ripro 资源版本:1.0 资源大小:4.02KB
下载地址
  • “爱游博客”微信公众号
  • 关注微信公众号,分享前沿资讯!
  • weinxin
  • “爱游博客”微信小程序
  • 微信扫一扫,资讯唾手可得!
  • weinxin
阿里云首次购买高性能云服务器,享低至2折优惠