typecho会员中心的头部导航菜单

之前的比较简单,就一个下拉菜单就完事了,看到日主题的用户导航菜单,还是很不错的,就模仿抄袭改一下,具体如图所示

666.png

演示:注册后就看到了……

我把先样式代码集中分享出来,大家可以根据自己的需要去改造,有问题可以留言

样式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 条评论
6.5k

发表评论

已有 5 条评论

  1. Vincent     Win 10 /    Chrome
    2020-10-21 17:27

    感谢大佬,折腾一下我网站也加上了:阴险:

  2. yunxing     Win 7 /    Chrome
    2020-07-01 14:57

    谢谢站长。

  3. 窝瓜     Android /    QQ浏览器
    2020-07-01 01:56

    唉,会C语言,Python唯独不会HTML:狂汗:

  4. 青山隐隐     Win 10 /    Chrome
    2020-06-05 15:07

    站长,会员版的spzac3.1主题,没有买TePasss插件的时候,开启自带会员中心时购买界面和个人中心界面一直无法打开,显示数据库错误,那个会员版的主题是一定要搭配TePasss插件才可以吗?

    1. 【管理员】Vv     Win 7 /    Chrome
      2020-06-05 16:04

      @青山隐隐

      是的,需要TePasss插件才行:问号:

小灯泡设计

版权申明:本素材由本站发布,用户购买后只有终端使用权,禁止转售和转载

!