Discuz! 美化 discuzx5 的下拉菜单、搜索框和登录选项

boonkiong

Discuz! 美化 discuzx5 的搜索框

  

Discuz! 美化 discuzx5 的搜索框

  

Discuz! 美化 discuzx5 的下拉菜单、搜索框和登录选项

打开 template\discuzx5\common\header_userstatus.php，替换所有的内容：

1. <?php echo '';exit;?>
   
2. <div class="header-right">
   
3.     <!--{if $_G['style']['is_search']}-->
   
4.     <div class="header-searcher">
   
5.        <div class="searcher-wrap">
   
6.           <form method="{if $_G[fid] && !empty($searchparams[url])}get{else}post{/if}" autocomplete="off"
   
7.               action="{if $_G[fid] && !empty($searchparams[url])}$searchparams[url]{else}search.php?searchsubmit=yes{/if}" target="_blank">
   
8.               <input type="hidden" name="mod" value="forum" />
   
9.             
   
10.               <!-- 1. 默认显示的放大镜按钮 -->
    
11.               <button type="button" class="search-icon-btn" aria-label="Search">
    
12.                 <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
    
13.               </button>
    
14. 
    
15.               <!-- 2. 悬停弹出的气泡框 -->
    
16.               <div class="search-dropdown-box">
    
17.                  <div class="search-box-inner">
    
18.                     <input type="text" name="srchtxt" placeholder="{lang enter_content}" value="{if $keyword}$keyword{/if}"
    
19.                         class="search-input">
    
20.                     <button type="submit" name="searchsubmit" sc="1" class="search-submit-btn" value="true">搜索</button>
    
21.                  </div>
    
22.               </div>
    
23.           </form>
    
24.        </div>
    
25.     </div>
    
26.     <!--{/if}-->
    
27. 
    
28.         {cells common/header/i18n_switch}
    
29. 
    
30.         <!--{if $_G['uid']}-->
    
31.         <!--{if strpos($_G['setting']['pluginhooks']['global_usernav_extra1'], 'function showmyrepeats()')}-->
    
32.         <div class="header-notice">
    
33.                 <div class="notice-icon"><a href="home.php?mod=spacecp&ac=plugin&id=myrepeats:memcp" id="myrepeats" class="kmico" onmouseover="delayShow(this, showmyrepeats)" title="{lang tmp070}">
    
34.                 <i class="dzicon myrepeats"></i>
    
35.                 </a></div>
    
36.         </div>
    
37.         <!--{/if}-->
    
38.         <div class="header-notice">
    
39.                 <div class="notice-icon">
    
40.                         <i class="dzicon noticeicon"></i>
    
41.                         <!--{if $_G['member']['newprompt'] || $_G['member']['newpm']}-->
    
42.                         {eval $newprompt = $_G['member']['newprompt'] + $_G['member']['newpm'];}
    
43.                         <span class="dot">{if $newprompt >99}99{else}$newprompt{/if}</span>
    
44.                         <!--{/if}-->
    
45.                 </div>
    
46. 
    
47.                 <div class="notice-dropdown poptip-popper">
    
48.                         <div class="poptip-arrow"></div>
    
49.                         <ul class="notice-content">
    
50.                                 <li class="notice-item"><a href="home.php?mod=space&do=notice">{lang remind}<!--{if $_G[member][newprompt]}--><span class="num">($_G[member][newprompt])</span><span class="dot"></span><!--{/if}--></a></li>
    
51.                                 <!--{if !empty($_G['setting']['pmstatus'])}-->
    
52.                                         <li class="notice-item"><a href="home.php?mod=space&do=pm">{lang pm_center}{if $_G[member][newpm]}<span class="dot"></span>{/if}</a></li>
    
53.                                 <!--{/if}-->
    
54.                                 <li class="notice-item"><a href="home.php?mod=follow&do=follower"><!--{lang notice_interactive_follower}-->{if $_G[member][newprompt_num][follower]} <span class="num">$_G[member][newprompt_num][follower]</span>{/if}{if $_G[member][newprompt_num][follower]}<span class="dot"></span>{/if}</a></li>
    
55.                                 <!--{if $_G[member][newprompt] && $_G[member][newprompt_num][follow]}-->
    
56.                                         <li class="notice-item"><a href="home.php?mod=follow"><!--{lang notice_interactive_follow}-->($_G[member][newprompt_num][follow])<span class="dot"></span></a></li>
    
57.                                 <!--{/if}-->
    
58.                                 <!--{if $_G['member']['newprompt']}-->
    
59.                                 <!--{loop $_G['member']['category_num'] $key $val}-->
    
60.                                         <li class="notice-item"><a href="home.php?mod=space&do=notice&view=$key"><!--{echo lang('template', 'notice_'.$key)}--><span class="num">$val</span><span class="dot"></span></a></li>
    
61.                                 <!--{/loop}-->
    
62.                                 <!--{/if}-->
    
63.                         </ul>
    
64.                 </div>
    
65.         </div>
    
66.         <div class="header-user">
    
67.                 <div class="header-user-info">
    
68.                         <div class="header-user-avatar">
    
69.                                 <a href="home.php?mod=space&uid=$_G[uid]">
    
70.                                         <!--{avatar($_G['uid'],'big')}-->
    
71.                                 </a>
    
72.                         </div>
    
73.                 </div>
    
74.                 <div class="header-user-dropdown poptip-popper">
    
75.                         <div class="poptip-arrow"></div>
    
76.                         <div class="user-card">
    
77.                                 <div class="user-card-top">
    
78.                                         <div class="block_avatar e-avatar"><a href="home.php?mod=space&uid=$_G[uid]"><!--{avatar($_G['uid'],'big')}--></a></div>
    
79.                                         <div class="block_name">
    
80.                                                 <a href="home.php?mod=space&uid=$_G[uid]">{$_G[member][username]}</a>
    
81.                                                 <a href="home.php?mod=spacecp&ac=usergroup" target="_blank">{$_G['group']['grouptitle']}</a>
    
82.                                         </div>
    
83.                                 </div>
    
84.                                 <div class="author_intro">
    
85.                                         <p>
    
86.                                                 <!--{if $_G['group']['allowinvisible']}-->
    
87.                                                 <span id="loginstatus" class="xi2">
    
88.                                                         <a id="loginstatusid" href="member.php?mod=switchstatus" title="{lang login_switch_invisible_mode}" onclick="ajaxget(this.href, 'loginstatus');return false;" class="xi2"></a>
    
89.                                                 </span>
    
90.                                                 <!--{/if}-->
    
91.                                                 <!--{if $_G['member']['freeze']}--><span class="xi1">{lang freeze}</span><!--{/if}-->
    
92.                                                 <a href="home.php?mod=spacecp&ac=credit&showcredit=1" target="_blank">{lang credits}: $_G['member']['credits']</a>
    
93.                                         </p>
    
94.                                 </div>
    
95.                                 <div class="user-card-area">
    
96.                                         <!--{if check_diy_perm($topic)}-->
    
97.                                         <a href="javascript:saveUserdata('diy_advance_mode', '1');openDiy();">{lang tmp071}</a>
    
98.                                         <!--{/if}-->
    
99.                                         <!--{if !empty($_G['setting']['taskstatus']) && !empty($_G['cookie']['taskdoing_'.$_G['uid']])}--><a href="home.php?mod=task&item=doing" id="task_ntc" class="info_task" target="_blank">{lang task_doing}</a><!--{/if}-->
    
100.                                         <!--{if ($_G['group']['allowmanagearticle'] || $_G['group']['allowpostarticle'] || $_G['group']['allowdiy'] || getstatus($_G['member']['allowadmincp'], 4) || getstatus($_G['member']['allowadmincp'], 6) || getstatus($_G['member']['allowadmincp'], 2) || getstatus($_G['member']['allowadmincp'], 3))}-->
     
101.                                                 <a href="portal.php?mod=portalcp" class="info_portalcp" target="_blank"><!--{if $_G['setting']['portalstatus'] }-->{lang portal_manage}<!--{else}-->{lang portal_block_manage}<!--{/if}--></a>
     
102.                                         <!--{/if}-->
     
103.                                         <!--{if $_G['uid'] && $_G['group']['radminid'] > 1}-->
     
104.                                                 <a href="forum.php?mod=modcp&fid=$_G['fid']" class="info_portalcp" target="_blank">{lang forum_manager}</a>
     
105.                                         <!--{/if}-->
     
106.                                         <!--{if $_G['uid'] && getstatus($_G['member']['allowadmincp'], 1)}-->
     
107.                                                 <a href="?app=admin" class="info_admin" target="_blank">{lang admincp}</a>
     
108.                                         <!--{/if}-->
     
109.                                 </div>
     
110.                                 <div class="user-card-area">
     
111.                                         <a href="home.php?mod=spacecp" class="info_setup" target="_blank">{lang myitem}{lang setup}</a>
     
112.                                         <a href="home.php?mod=space&do=thread&view=me" class="info_post" target="_blank">{lang myitem}{lang mypost}</a>
     
113.                                         <a href="home.php?mod=space&do=favorite&view=me" class="info_fav" target="_blank">{lang myitem}{lang favorite}</a>
     
114.                                         <a href="home.php?mod=space&do=friend" class="info_friend" target="_blank">{lang myitem}{lang friends}</a>
     
115.                                         <!--{hook/global_usernav_extra1}-->
     
116.                                         <!--{hook/global_usernav_extra2}-->
     
117.                                         <!--{hook/global_usernav_extra3}-->
     
118.                                         <!--{hook/global_usernav_extra4}-->
     
119.                                         <!--{hook/global_myitem_extra}-->
     
120.                                 </div>
     
121.                                 <!--{if $_G['style']['top_fastnav'] }-->
     
122.                                 <div class="dz_user_qmenu cl">
     
123.                                         <div class="qmenu_an" id="qmenu_an">
     
124.                                                 <a class="next" href="javascript:qmenu_move('1');"><em></em></a>
     
125.                                                 <a class="prev" href="javascript:qmenu_move('0');"><em></em></a>
     
126.                                         </div>
     
127.                                         <div class="qmenu_ico" id="qmenu_loop">
     
128.                                                 <ul class="cl" id="qmenu_loopul">
     
129.                                                         <!--{loop $_G['setting']['mynavs'] $nav}-->
     
130.                                                                 <!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}-->
     
131.                                                                         <li>{echo str_replace($nav['navname'], '<span>'. $nav['navname'].'</span>', $nav['code']);}</li>
     
132.                                                                 <!--{/if}-->
     
133.                                                         <!--{/loop}-->
     
134.                                                 </ul>
     
135.                                         </div>
     
136.                                 </div>
     
137.                                 <!--{/if}-->
     
138. 
     
139.                                 <!--{if $_G['uid'] && !empty($_G['style']['extstyle'])}-->
     
140.                                 <div class="user-card-skin">
     
141.                                         <!--{if !$_G[style][defaultextstyle]}-->
     
142.                                         <span onclick="extstyle('')" title="{lang default}"><i></i></span><!--{/if}-->
     
143.                                         <!--{loop $_G['style']['extstyle'] $extstyle}-->
     
144.                                         <span onclick="extstyle('$extstyle[0]')" title="$extstyle[1]"><i
     
145.                                                         style='background:$extstyle[2]'></i></span>
     
146.                                         <!--{/loop}-->
     
147.                                 </div>
     
148.                                 <!--{/if}-->
     
149.                                 <div class="user-card-bottom">
     
150.                                         <a href="member.php?mod=logging&action=logout&formhash={FORMHASH}" class="user-logout-btn">{lang logout}</a>
     
151.                                 </div>
     
152.                         </div>
     
153.                 </div>
     
154.         </div>
     
155.         <!--{else}-->
     
156.         <!--{hook/global_usernav_extra1}-->
     
157.        
     
158.         <!-- 未登录时的悬停登录/注册气泡菜单 -->
     
159.         <div class="header-login-menu">
     
160.                 <div class="login-menu-wrap">
     
161.                         <a href="member.php?mod=logging&action=login" onclick="showWindow('login', this.href);return false;" class="login-trigger">
     
162.                                 {lang login}
     
163.                         </a>
     
164.                         <div class="login-dropdown-box">
     
165.                                 <div class="login-box-inner">
     
166.                                         <a href="member.php?mod=logging&action=login" onclick="showWindow('login', this.href);return false;" class="menu-item">
     
167.                                                 立即登录
     
168.                                         </a>
     
169.                                         <a href="member.php?mod=register" class="menu-item">
     
170.                                                 立即注册
     
171.                                         </a>
     
172.                                 </div>
     
173.                         </div>
     
174.                 </div>
     
175.         </div>
     
176.         <!--{/if}-->
     
177. </div>
     
178. 
     
179. <!-- 集中整合的 CSS 样式 -->
     
180. <style>
     
181. /* 1. 搜索框相关样式 */
     
182. .header-searcher {
     
183.     position: relative;
     
184.     display: inline-block;
     
185.     vertical-align: middle;
     
186. }
     
187. .searcher-wrap {
     
188.     position: relative;
     
189. }
     
190. .search-icon-btn {
     
191.     background: #fcfcfc;
     
192.     border: none;
     
193.     color: #0090F0;
     
194.     border-radius: 50%;
     
195.     cursor: pointer;
     
196.     padding: 8px;
     
197.     display: flex;
     
198.     align-items: center;
     
199.     justify-content: center;
     
200. }
     
201. .search-dropdown-box {
     
202.     display: none;
     
203.     position: absolute;
     
204.     right: 0;
     
205.     top: 100%;
     
206.     margin-top: 10px;
     
207.     background: #fff;
     
208.     padding: 15px;
     
209.     border-radius: 6px;
     
210.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     
211.     z-index: 999;
     
212.     white-space: nowrap;
     
213. }
     
214. .search-dropdown-box::before {
     
215.     content: '';
     
216.     position: absolute;
     
217.     bottom: 100%;
     
218.     right: 20px;
     
219.     border-width: 6px;
     
220.     border-style: solid;
     
221.     border-color: transparent transparent #fff transparent;
     
222. }
     
223. .searcher-wrap:hover .search-dropdown-box {
     
224.     display: block;
     
225. }
     
226. .search-box-inner {
     
227.     display: flex;
     
228.     align-items: center;
     
229.     gap: 8px;
     
230. }
     
231. .search-dropdown-box .search-input {
     
232.     width: 200px;
     
233.     height: 34px;
     
234.     padding: 0 10px;
     
235.     border: 1px solid #dcdfe6;
     
236.     border-radius: 4px;
     
237.     outline: none;
     
238.     font-size: 14px;
     
239.     color: #606266;
     
240.     background: #fff;
     
241. }
     
242. .search-dropdown-box .search-input:focus {
     
243.     border-color: #409eff;
     
244. }
     
245. .search-dropdown-box .search-submit-btn {
     
246.     height: 34px;
     
247.     padding: 0 16px;
     
248.     background-color: #1890ff;
     
249.     color: #fff;
     
250.     border: none;
     
251.     border-radius: 4px;
     
252.     cursor: pointer;
     
253.     font-size: 14px;
     
254. }
     
255. .search-dropdown-box .search-submit-btn:hover {
     
256.     background-color: #40a9ff;
     
257. }
     
258. 
     
259. /* 2. 登录/注册气泡菜单相关样式 */
     
260. .header-login-menu {
     
261.     position: relative;
     
262.     display: inline-block;
     
263.     vertical-align: middle;
     
264. }
     
265. .login-menu-wrap {
     
266.     position: relative;
     
267. }
     
268. .login-trigger {
     
269.     color: #0090F0;
     
270.     text-decoration: none;
     
271.     font-size: 14px;
     
272.     padding: 5px 10px;
     
273.     display: inline-block;
     
274.     cursor: pointer;
     
275. }
     
276. .login-trigger:hover {
     
277.     color: #1890ff;
     
278. }
     
279. .login-dropdown-box {
     
280.     display: none;
     
281.     position: absolute;
     
282.     right: 0;
     
283.     top: 100%;
     
284.     margin-top: 8px;
     
285.     background: #fff;
     
286.     padding: 10px;
     
287.     border-radius: 6px;
     
288.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     
289.     z-index: 999;
     
290.     white-space: nowrap;
     
291. }
     
292. .login-dropdown-box::before {
     
293.     content: '';
     
294.     position: absolute;
     
295.     bottom: 100%;
     
296.     right: 20px;
     
297.     border-width: 6px;
     
298.     border-style: solid;
     
299.     border-color: transparent transparent #fff transparent;
     
300. }
     
301. .login-menu-wrap:hover .login-dropdown-box {
     
302.     display: block;
     
303. }
     
304. .login-box-inner {
     
305.     display: flex;
     
306.     flex-direction: column;
     
307.     gap: 6px;
     
308. }
     
309. .login-dropdown-box .menu-item {
     
310.     display: block;
     
311.     padding: 8px 16px;
     
312.     color: #ff0000;
     
313.     background: #fff;
     
314.     text-align: center;
     
315.     border-radius: 4px;
     
316.     text-decoration: none;
     
317.     font-size: 14px;
     
318.     border: 1px solid transparent;
     
319. }
     
320. .login-dropdown-box .menu-item:hover {
     
321.     color: #1890ff;
     
322.     background: #F0F7FF;
     
323.     border-color: #d1e9ff;
     
324. }
     
325. </style>
     
326. 
     
327. <script type="text/javascript">
     
328. document.querySelectorAll('.header-user, .header-notice, .header-i18n, .header-client').forEach(function(element) {
     
329.     element.addEventListener('mouseenter', function() {
     
330.         this.classList.add('open');
     
331.     });
     
332. 
     
333.     element.addEventListener('mouseleave', function() {
     
334.         this.classList.remove('open');
     
335.     });
     
336. });
     
337. if($("qmenu_loop")){
     
338.         var qmenu_timer, qmenu_scroll_l;
     
339.         var qmenu_in = 0;
     
340.         var qmenu_width = 163;
     
341.         var qmenu_loop = $('qmenu_loop');
     
342.         var qmenu_all_width = 41 * $('qmenu_loopul').getElementsByTagName("li").length - qmenu_width;
     
343.         if(qmenu_all_width < 20){
     
344.                 $('qmenu_an').style.display = 'none';
     
345.         }
     
346. }
     
347. function qmenu_move(qmenu_lr){
     
348.         if(qmenu_in == 0 && ((qmenu_lr == 1 && qmenu_loop.scrollLeft < qmenu_all_width) || (qmenu_lr == 0 && qmenu_loop.scrollLeft > 0))){
     
349.                 qmenu_in = 1;
     
350.                 qmenu_scroll_l = qmenu_loop.scrollLeft;
     
351.                 qmenu_timer = setInterval(function(){
     
352.                         qmenu_scroll(qmenu_lr);
     
353.                 }, 10);
     
354.         }
     
355. }
     
356. function qmenu_scroll(qmenu_lr){
     
357.         if((qmenu_lr == 1 && qmenu_loop.scrollLeft >= qmenu_width + qmenu_scroll_l) || (qmenu_lr == 0 && ((qmenu_loop.scrollLeft <= qmenu_scroll_l - qmenu_width) || qmenu_loop.scrollLeft == 0))){
     
358.                 clearInterval(qmenu_timer);
     
359.                 qmenu_in = 0;
     
360.         }else{
     
361.                 if(qmenu_lr == 1){
     
362.                         qmenu_loop.scrollLeft += Math.round((qmenu_width + qmenu_scroll_l - qmenu_loop.scrollLeft) / 15) + 1;
     
363.                 }else{
     
364.                         qmenu_loop.scrollLeft -= Math.round((qmenu_width - (qmenu_scroll_l - qmenu_loop.scrollLeft)) / 15) + 1;
     
365.                 }
     
366.         }
     
367. }
     
368. </script>

复制代码

另外再打开 template\discuzx5\common\extend_common.css，在最下面添加：

1. /*导航弹窗*/
   
2. /* 1. 先重置整个下拉弹窗容器的背景和边框 */
   
3. #hds .p_pop {
   
4.     background: #FFFFFF !important;
   
5.     border: 1px solid #E4E7ED !important;
   
6.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
   
7.     border-radius: 4px !important;
   
8.     padding: 6px !important;
   
9. }
   
10. 
    
11. /* 2. 针对里面的每一个链接（菜单项）进行统一排版 */
    
12. =#hds .p_pop a {
    
13.     display: block !important;
    
14.     width: auto !important;
    
15.     min-width: 100px !important;
    
16.     height: 36px !important;
    
17.     line-height: 36px !important;
    
18.     padding: 0 15px !important;
    
19.     margin: 2px 0 !important;
    
20.     border: 1px solid transparent !important; /* 默认透明边框，防止抖动 */
    
21.     background: #FFFFFF !important;
    
22.     color: #606266 !important;
    
23.     text-align: left !important; /* 文字居中（若想靠左可改 nav-align left） */
    
24.     box-shadow: none !important;
    
25.     border-radius: 4px !important;
    
26.     font-size: 14px !important;
    
27. }
    
28. 
    
29. /* 3. 鼠标悬停时的样式（模仿图片中的清爽蓝白风格） */
    
30. #hds .p_pop a:hover {
    
31.     color: #1890ff !important;
    
32.     background: #F0F7FF !important; /* 浅蓝色背景，或者改成你图中的 #F2F2F2 */
    
33.     border: 1px solid #d1e9ff !important; /* 悬停时带淡淡的边框，就像截图里那样 */
    
34.     text-decoration: none !important;
    
35. }
    
36. /*切换语言弹窗*/
    
37. .header-i18n .i18n-content .i18n-item a {
    
38.     display: block !important;
    
39.     width: auto !important;
    
40.     min-width: 100px !important;
    
41.     height: 36px !important;
    
42.     line-height: 36px !important;
    
43.     padding: 0 15px !important;
    
44.     margin: 2px 0 !important;
    
45.     border: 1px solid transparent !important; /* 默认透明边框，防止抖动 */
    
46.     background: #FFFFFF !important;
    
47.     color: #606266 !important;
    
48.     box-shadow: none !important;
    
49.     border-radius: 4px !important;
    
50.     font-size: 14px !important;
    
51. }
    
52. .header-i18n .i18n-content .i18n-item :hover {
    
53.     color: #1890ff !important;
    
54.     background: #F0F7FF !important; /* 浅蓝色背景，或者改成你图中的 #F2F2F2 */
    
55.     border: 1px solid #d1e9ff !important; /* 悬停时带淡淡的边框，就像截图里那样 */
    
56.     text-decoration: none !important;
    
57. }
    
58. /*消息提示弹窗*/
    
59. .header-notice .notice-content .notice-item a {
    
60.     display: block !important;
    
61.     width: auto !important;
    
62.     min-width: 100px !important;
    
63.     height: 36px !important;
    
64.     line-height: 36px !important;
    
65.     padding: 0 15px !important;
    
66.     margin: 2px 0 !important;
    
67.     border: 1px solid transparent !important; /* 默认透明边框，防止抖动 */
    
68.     background: #FFFFFF !important;
    
69.     color: #606266 !important;
    
70.     box-shadow: none !important;
    
71.     border-radius: 4px !important;
    
72.     font-size: 14px !important;
    
73. }
    
74. .header-notice .notice-content .notice-item :hover {
    
75.     color: #1890ff !important;
    
76.     background: #F0F7FF !important; /* 浅蓝色背景，或者改成你图中的 #F2F2F2 */
    
77.     border: 1px solid #d1e9ff !important; /* 悬停时带淡淡的边框，就像截图里那样 */
    
78.     text-decoration: none !important;
    
79. }
    
80. /*end*/

复制代码