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文件研究一下,实在不懂,或者其他问题,欢迎留言咨询
文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/437
5 条评论
7.4k
感谢大佬,折腾一下我网站也加上了
谢谢站长。
唉,会C语言,Python唯独不会HTML
站长,会员版的spzac3.1主题,没有买TePasss插件的时候,开启自带会员中心时购买界面和个人中心界面一直无法打开,显示数据库错误,那个会员版的主题是一定要搭配TePasss插件才可以吗?
@青山隐隐
是的,需要TePasss插件才行