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

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

666.png

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

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

样式css:

  1. <style>
  2. .header-top {
  3. position: relative;
  4. border-bottom: 2px dashed #34495e;
  5. }
  6. .header-top img {
  7. float: left;
  8. width: 45px;
  9. border-radius: 50%;
  10. margin-top: 6px;
  11. margin-right: 10px;
  12. height: 45px;
  13. }
  14. .header-center {
  15. display: flex;
  16. padding: 10px 0 0;
  17. }
  18. .user-names {
  19. line-height: 30px !important;
  20. max-width: 100px;
  21. overflow: hidden;
  22. display: block;
  23. word-wrap: break-word;
  24. text-overflow: ellipsis;
  25. white-space: nowrap;
  26. float: left;
  27. font-size: 14px;
  28. }
  29. .wp-VIP {
  30. line-height: 30px !important;
  31. margin-left: 10px;
  32. font-style: normal;
  33. color: #fff;
  34. font-size: 12px !important;
  35. background-color: #fd7a25;
  36. padding: 2px 8px;
  37. border-radius: 10px;
  38. }
  39. .header-top .group-name {
  40. background: linear-gradient(90deg, #fd731f, #fe822f);
  41. padding: 2px 8px;
  42. border-radius: 10px;
  43. font-size: 12px;
  44. margin-left: 10px;
  45. font-style: normal;
  46. font-weight: normal;
  47. color: #fff;
  48. }
  49. .header-top p {
  50. font-size: 12px;
  51. color: #8495a0;
  52. cursor: pointer;
  53. }
  54. .header-top .logout {
  55. position: absolute;
  56. right: 0;
  57. top: 0;
  58. color: #888 !important;
  59. font-size: 12px;
  60. }
  61. .header-center .md-l {
  62. float: left;
  63. width: 50%;
  64. border-radius: 6px 0 0 6px;
  65. padding: 10px 20px;
  66. border: 2px transparent solid;
  67. background-color: #34495e;
  68. -webkit-transition: all 0.3s ease;
  69. -moz-transition: all 0.3s ease;
  70. -o-transition: all 0.3s ease;
  71. transition: all 0.3s ease;
  72. position: relative;
  73. }
  74. .header-center .md-r {
  75. float: left;
  76. width: 50%;
  77. border-radius: 0 6px 6px 0;
  78. padding: 10px;
  79. border: 2px transparent solid;
  80. background-color: #34495e;
  81. -webkit-transition: all 0.3s ease;
  82. -moz-transition: all 0.3s ease;
  83. -o-transition: all 0.3s ease;
  84. transition: all 0.3s ease;
  85. position: relative;
  86. }
  87. .header-center .md-tit {
  88. display: block;
  89. color: #fff;
  90. font-size: 14px;
  91. margin-bottom: 10px;
  92. text-align: left;
  93. }
  94. .header-center .dou, .header-center .jinbi {
  95. display: block;
  96. -webkit-line-clamp: 1;
  97. -webkit-box-orient: vertical;
  98. white-space: nowrap;
  99. overflow: hidden;
  100. text-overflow: ellipsis;
  101. font-size: 12px;
  102. margin-bottom: 10px;
  103. }
  104. .header-box {
  105. color: #fff;
  106. }
  107. .header-bottom ul {
  108. padding: 1px;
  109. display: flex;
  110. text-align: center;
  111. margin: auto;
  112. list-style: none;
  113. }
  114. .header-bottom li {
  115. float: left;
  116. width: 33%;
  117. cursor: pointer;
  118. }
  119. .header-bottom li a{
  120. font-size: 12px;
  121. }
  122. .header-bottom li i {
  123. color: #364e65 !important;
  124. font-size: 15px;
  125. line-height: 0px;
  126. }
  127. </style>

放在哪都行,最好是css文件里面

结构代码:

  1. <div class="header__dropdown">
  2. <div class="header-box">
  3. <div class="refresh-header-top">
  4. <div class="header-top">
  5. <?php $email=$this->user->mail; $imgUrl = getGravatar($email);echo '<img src="'.$imgUrl.'">'; ?>
  6. <div>
  7. <span>
  8. <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>
  9. <i class="wp wp-VIP"> 终身会员 </i><i class="group-name"> <?php echo date('Y-m-d',$rsvips['vip_endtime']); ?></i> </span>
  10. <p>加入VIP,享受折扣下载全站资源,享受VIP特权。</p>
  11. </div>
  12. <a href="<?php $this->options->logoutUrl(); ?>" class="logout">退出</a>
  13. </div>
  14. </div>
  15. <div class="header-center">
  16. <div class="md-l">
  17. <span class="md-tit">等级积分</span>
  18. <span class="jinbi" title="我的积分:<?php autvip($this->user->uid,'3');?>"><i></i>我的积分:<?php autvip($this->user->uid,'3');?></span>
  19. <span class="dou" title="账号年龄:<?php reg_login($user->uid); ?>天"><i></i>账号年龄:<?php reg_login($user->uid); ?></span>
  20. </div>
  21. <div class="md-r">
  22. <span class="md-tit">个人信息</span>
  23. <span class="jinbi" title="<?php $this->user->mail(); ?>"><i></i><?php $this->user->mail(); ?></span>
  24. <span class="dou" title="评论次数:<?php plium($user->uid);?>"><i></i>评论次数:<?php plium($user->uid);?></span>
  25. </div>
  26. </div>
  27. <div class="header-bottom">
  28. <ul>
  29. <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>
  30. <li><a href="<?php $this->options->siteUrl(); ?><?php $this->options->vipbuys(); ?>.html"><i class="icon iconfont icon-ic_star_line"></i>会员升级</a></li>
  31. <li><a href="/pro/"><i class="icon iconfont icon-ic_signedin"></i>主题模板</a></li>
  32. <li><a href="<?php $this->options->logoutUrl(); ?>"><i class="icon iconfont icon-ic_quit"></i>安全退出</a></li>
  33. </ul>
  34. </div>
  35. </div>
  36. </div>

只是根据我自己的网站来改造的,里面部分设置的地方可以根据自己的网站去修改

Spzac主题的话,我把nav.php导航的代码这里

改成了

  1. <div class="dropdown-menu dropdown-menu-right header__dropdown-menu header__dropdown-menu--right aut_wl" aria-labelledby="dropdownMenuProfile">
  2. <?php $this->need('author - nav.php'); ?>
  3. </div>

这里注意的地方是多了aut_wl
强制做了个定义宽度

  1. .aut_wl {
  2. min-width: 400px !important;
  3. }

大概就差不多了,spzac主题的话,可以下载author - nav.php文件研究一下,实在不懂,或者其他问题,欢迎留言咨询

文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/437
5 条评论
7.4k

发表评论

已有 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插件才行

小灯泡设计

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

!