July 19
Typecho会员中心的头部导航菜单
之前的比较简单,就一个下拉菜单就完事了,看到日主题的用户导航菜单,还是很不错的,就模仿抄袭改一下,具体如图所示
演示:注册后就看到了……
我把先样式代码集中分享出来,大家可以根据自己的需要去改造,有问题可以留言
样式css:
<style>
.header-top {
position: relative;
border-bottom: 2px dashed #34495e;
}
.header-top img {
float: left;
width: 45px;
border-radius: 50%;
margin-top: 6px;
margin-right: 10px;
height: 45px;
}
.header-center {
display: flex;
padding: 10px 0 0;
}
.user-names {
line-height: 30px !important;
max-width: 100px;
overflow: hidden;
display: block;
word-wrap: break-word;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
font-size: 14px;
}
.wp-VIP {
line-height: 30px !important;
margin-left: 10px;
font-style: normal;
color: #fff;
font-size: 12px !important;
background-color: #fd7a25;
padding: 2px 8px;
border-radius: 10px;
}
.header-top .group-name {
background: linear-gradient(90deg, #fd731f, #fe822f);
padding: 2px 8px;
border-radius: 10px;
font-size: 12px;
margin-left: 10px;
font-style: normal;
font-weight: normal;
color: #fff;
}
.header-top p {
font-size: 12px;
color: #8495a0;
cursor: pointer;
}
.header-top .logout {
position: absolute;
right: 0;
top: 0;
color: #888 !important;
font-size: 12px;
}
.header-center .md-l {
float: left;
width: 50%;
border-radius: 6px 0 0 6px;
padding: 10px 20px;
border: 2px transparent solid;
background-color: #34495e;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
position: relative;
}
.header-center .md-r {
float: left;
width: 50%;
border-radius: 0 6px 6px 0;
padding: 10px;
border: 2px transparent solid;
background-color: #34495e;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
position: relative;
}
.header-center .md-tit {
display: block;
color: #fff;
font-size: 14px;
margin-bottom: 10px;
text-align: left;
}
.header-center .dou, .header-center .jinbi {
display: block;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
margin-bottom: 10px;
}
.header-box {
color: #fff;
}
.header-bottom ul {
padding: 1px;
display: flex;
text-align: center;
margin: auto;
list-style: none;
}
.header-bottom li {
float: left;
width: 33%;
cursor: pointer;
}
.header-bottom li a{
font-size: 12px;
}
.header-bottom li i {
color: #364e65 !important;
font-size: 15px;
line-height: 0px;
}
</style>
放在哪都行,最好是css文件里面
结构代码:
<div class="header__dropdown">
<div class="header-box">
<div class="refresh-header-top">
<div class="header-top">
<?php $email=$this->user->mail; $imgUrl = getGravatar($email);echo '<img src="'.$imgUrl.'">'; ?>
<div>
<span>
<a class="user-names" href="<?php $this->options->siteUrl(); ?><?php if ($this->options->rewrite==0): ?>index.php/<?php endif; ?>author/<?php $this->user->uid(); ?>"><?php $this->user->screenName(); ?></a>
<i class="wp wp-VIP"> 终身会员 </i><i class="group-name"> <?php echo date('Y-m-d',$rsvips['vip_endtime']); ?></i> </span>
<p>加入VIP,享受折扣下载全站资源,享受VIP特权。</p>
</div>
<a href="<?php $this->options->logoutUrl(); ?>" class="logout">退出</a>
</div>
</div>
<div class="header-center">
<div class="md-l">
<span class="md-tit">等级积分</span>
<span class="jinbi" title="我的积分:<?php autvip($this->user->uid,'3');?>"><i></i>我的积分:<?php autvip($this->user->uid,'3');?></span>
<span class="dou" title="账号年龄:<?php reg_login($user->uid); ?>天"><i></i>账号年龄:<?php reg_login($user->uid); ?>天</span>
</div>
<div class="md-r">
<span class="md-tit">个人信息</span>
<span class="jinbi" title="<?php $this->user->mail(); ?>"><i></i><?php $this->user->mail(); ?></span>
<span class="dou" title="评论次数:<?php plium($user->uid);?>"><i></i>评论次数:<?php plium($user->uid);?></span>
</div>
</div>
<div class="header-bottom">
<ul>
<li><a href="<?php $this->options->siteUrl(); ?><?php if ($this->options->rewrite==0): ?>index.php/<?php endif; ?>author/<?php $this->user->uid(); ?>"><i class="icon iconfont icon-ic_friendlist"></i>个人设置</a></li>
<li><a href="<?php $this->options->siteUrl(); ?><?php $this->options->vipbuys(); ?>.html"><i class="icon iconfont icon-ic_star_line"></i>会员升级</a></li>
<li><a href="/pro/"><i class="icon iconfont icon-ic_signedin"></i>主题模板</a></li>
<li><a href="<?php $this->options->logoutUrl(); ?>"><i class="icon iconfont icon-ic_quit"></i>安全退出</a></li>
</ul>
</div>
</div>
</div>
只是根据我自己的网站来改造的,里面部分设置的地方可以根据自己的网站去修改
Spzac主题的话,我把nav.php导航的代码这里
会员菜单
改成了
<div class="dropdown-menu dropdown-menu-right header__dropdown-menu header__dropdown-menu--right aut_wl" aria-labelledby="dropdownMenuProfile">
<?php $this->need('author - nav.php'); ?>
</div>
这里注意的地方是多了aut_wl
强制做了个定义宽度
.aut_wl {
min-width: 400px !important;
}
大概就差不多了,spzac主题的话,可以下载 author - nav.php.zip 文件研究一下,实在不懂,或者其他问题,欢迎留言咨询
作者:https://www.dpaoz.com/437
:D 少女祈祷中...