Add Dropdown Menu

ego008 · Jun 19, 2024 · e651608 · e651608
1 parent f850116
commit e651608
Show file tree

Hide file tree

Showing 3 changed files with 229 additions and 222 deletions.
diff --git a/static/css/main.css b/static/css/main.css
@@ -135,8 +135,9 @@ h1.br-nav, h2.br-nav, h3.br-nav, h4.br-nav {color:#777;font-size: 1em;font-weigh
 .home-menu {background-color: #373737;}
 .home-menu img.avatar {width: 18px;height: 18px;vertical-align: middle;}
 .home-menu a {color: #fff;}
-.home-menu a:hover {color: #000;background-color: #fff}
+.home-menu a:hover {color: #000;}
 .home-menu ul {float: right;}
+.home-menu .pure-menu-children a {color: #666;}
 
 .main-wrap {margin: 1.2em 0;}
 .main-left-body {padding: 0;margin: 0 1.618em 1.2em 0;}

diff --git a/views/ybs/base.qtpl b/views/ybs/base.qtpl
@@ -114,8 +114,13 @@ function handleScroll() {
 <a href="/" class="pure-menu-heading pure-menu-link">{%s p.SiteCf.Name %}</a>
 <ul class="pure-menu-list">
     {% if p.CurrentUser.ID > 0 %}
-    <li class="pure-menu-item"><a href="/setting" class="pure-menu-link"><img src="/static/avatar/{%dul p.CurrentUser.ID %}.jpg" class="avatar" alt="{%s p.CurrentUser.Name %} avatar"> {%s p.CurrentUser.Name %}</a></li>
-    <li class="pure-menu-item"><a href="/logout" class="pure-menu-link">退出</a></li>
+    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
+        <a href="#" id="menuLink1" class="pure-menu-link" style="padding: .5em 1em;"><img class="avatar" src="/static/avatar/{%dul p.CurrentUser.ID %}.jpg" alt="{%s p.CurrentUser.Name %} avatar"/></a>
+        <ul class="pure-menu-children">
+            <li class="pure-menu-item"><a href="/setting" class="pure-menu-link">设置</a></li>
+            <li class="pure-menu-item"><a href="/logout" class="pure-menu-link menu-item-divided">退出</a></li>
+        </ul>
+    </li>
     {% else %}
     <li class="pure-menu-item"><a href="/login" rel="nofollow" class="pure-menu-link">登录</a></li>
     <li class="pure-menu-item"><a href="/register" rel="nofollow" class="pure-menu-link">注册</a></li>