tazpanel rev 213
Add dropdown menus
author | Pascal Bellard <pascal.bellard@slitaz.org> |
---|---|
date | Wed Nov 30 11:46:17 2011 +0100 (2011-11-30) |
parents | 3a8304862453 |
children | eb02b7379ca8 |
files | styles/default/header.html styles/default/style.css |
line diff
1.1 --- a/styles/default/header.html Tue Nov 29 18:13:57 2011 +0100 1.2 +++ b/styles/default/header.html Wed Nov 30 11:46:17 2011 +0100 1.3 @@ -20,14 +20,104 @@ 1.4 <img src="/styles/default/images/help.png" /></a> 1.5 </div> 1.6 <div id="menu"> 1.7 - <a href="/">Panel</a> 1.8 - <a href="/pkgs.cgi">Packages</a> 1.9 - <a href="/network.cgi">Network</a> 1.10 - <a href="/settings.cgi">Settings</a> 1.11 - <a href="/live.cgi">Live</a> 1.12 - <a href="/boot.cgi">Boot</a> 1.13 - <a href="/hardware.cgi">Hardware</a> 1.14 - <a href="/installer.cgi">Install</a> 1.15 + <ul class="menu"> 1.16 + <li class="drop"> 1.17 + <a href="/">Panel</a> 1.18 + <span class="toggle"> </span> 1.19 + <ul> 1.20 + <li> 1.21 + <a href="/index.cgi?terminal">Terminal</a> 1.22 + </li> 1.23 + <li> 1.24 + <a href="/index.cgi?top">Processes</a> 1.25 + </li> 1.26 + <li> 1.27 + <a href="/index.cgi?report">Create a report</a> 1.28 + </li> 1.29 + </ul> 1.30 + </li> 1.31 + <li class="drop"> 1.32 + <a href="/pkgs.cgi">Packages</a> 1.33 + <span class="toggle"> </span> 1.34 + <ul> 1.35 + <li> 1.36 + <a href="/pkgs.cgi?list">My packages</a> 1.37 + </li> 1.38 + <li> 1.39 + <a href="/pkgs.cgi?recharge">Recharge list</a> 1.40 + </li> 1.41 + <li> 1.42 + <a href="/pkgs.cgi?up">Check updates</a> 1.43 + </li> 1.44 + <li> 1.45 + <a href="/pkgs.cgi?admin">Administration</a> 1.46 + </li> 1.47 + </ul> 1.48 + </li> 1.49 + <li class="drop"> 1.50 + <a href="/network.cgi">Network</a> 1.51 + <span class="toggle"> </span> 1.52 + <ul> 1.53 + <li> 1.54 + <a href="/network.cgi?eth">Ethernet</a> 1.55 + </li> 1.56 + <li> 1.57 + <a href="/network.cgi?wifi">Wireless</a> 1.58 + </li> 1.59 + <li> 1.60 + <a href="/index.cgi?file=/etc/network.conf">Configuration</a> 1.61 + </li> 1.62 + </ul> 1.63 + </li> 1.64 + <li class="drop"> 1.65 + <a href="/settings.cgi">Settings</a> 1.66 + <span class="toggle"> </span> 1.67 + <ul> 1.68 + <li> 1.69 + <a href="/settings.cgi?users">Users</a> 1.70 + </li> 1.71 + </ul> 1.72 + </li> 1.73 + <li class=""> 1.74 + <a href="/live.cgi">Live</a> 1.75 + </li> 1.76 + <li class="drop"> 1.77 + <a href="/boot.cgi">Boot</a> 1.78 + <span class="toggle"> </span> 1.79 + <ul> 1.80 + <li> 1.81 + <a href="/boot.cgi?log">Boot logs</a> 1.82 + </li> 1.83 + <li> 1.84 + <a href="/boot.cgi?daemons">Manage daemons</a> 1.85 + </li> 1.86 + <li> 1.87 + <a href="/boot.cgi?grub">Boot loader</a> 1.88 + </li> 1.89 + </ul> 1.90 + </li> 1.91 + <li class="drop"> 1.92 + <a href="/hardware.cgi">Hardware</a> 1.93 + <span class="toggle"> </span> 1.94 + <ul> 1.95 + <li> 1.96 + <a href="/hardware.cgi?modules">Modules</a> 1.97 + </li> 1.98 + </ul> 1.99 + </li> 1.100 + <li class="drop"> 1.101 + <a href="/installer.cgi">Install</a> 1.102 + <span class="toggle"> </span> 1.103 + <ul> 1.104 + <li> 1.105 + <a href="/installer.cgi?page=install">Install</a> 1.106 + </li> 1.107 + <li> 1.108 + <a href="/installer.cgi?page=upgrade">Upgrade</a> 1.109 + </li> 1.110 + </ul> 1.111 + </li> 1.112 + </ul> 1.113 </div> 1.114 </div> 1.115
2.1 --- a/styles/default/style.css Tue Nov 29 18:13:57 2011 +0100 2.2 +++ b/styles/default/style.css Wed Nov 30 11:46:17 2011 +0100 2.3 @@ -272,3 +272,88 @@ 2.4 2.5 #footer a { color: #bbb; } 2.6 #footer a:hover { color: #555; } 2.7 + 2.8 +/* ------------------------------ */ 2.9 +/* DROPDOWN MENU */ 2.10 +/* ------------------------------ */ 2.11 +ul.menu { 2.12 + margin:0; 2.13 + padding:0px 0 0 0; 2.14 +} 2.15 +ul.menu li { 2.16 + display:block; 2.17 + float:left; 2.18 + position:relative; 2.19 + padding:0; 2.20 +} 2.21 +ul.menu li.current { 2.22 + background:#f1f1f1; 2.23 +} 2.24 + 2.25 +ul.menu li:hover { 2.26 + background:#f1f1f1; 2.27 +} 2.28 + 2.29 + 2.30 +ul.menu li a { 2.31 + display:block; 2.32 + text-decoration:none; 2.33 + line-height:15px; 2.34 +} 2.35 + 2.36 +ul.menu li a span { 2.37 + font-weight:normal; 2.38 + padding-left:3px; 2.39 +} 2.40 +ul.menu li.drop a { 2.41 + padding-right:7px; 2.42 +} 2.43 +ul.menu li.drop:hover li { 2.44 + border:none; 2.45 +} 2.46 +ul.menu li.drop span.toggle { 2.47 + display:block; 2.48 + height:26px; 2.49 + padding:0; 2.50 +} 2.51 +ul.menu li.drop:hover span.toggle, ul.menu li.drop.current span.toggle { 2.52 + background-position:1px 5px; 2.53 +} 2.54 +ul.menu li.drop:hover ul { 2.55 + display:block; 2.56 + z-index:1; 2.57 + padding-bottom:8px; 2.58 +} 2.59 +ul.menu li ul { 2.60 + display:none; 2.61 + position:absolute; 2.62 + width: auto; 2.63 + top: 15px; 2.64 + left:0; 2.65 + list-style-type:none; 2.66 + margin:0; 2.67 + padding:9px 0 0 0; 2.68 +} 2.69 +ul.menu li ul li { 2.70 + float:none; 2.71 + height: auto; 2.72 + margin:0; 2.73 + padding:0; 2.74 + border:none; 2.75 +} 2.76 +ul.menu li ul li a { 2.77 + float:none; 2.78 + background:none; 2.79 + margin:0; 2.80 + padding:0; 2.81 + display:block; 2.82 + font-size:13px; 2.83 + height:auto; 2.84 + margin:0; 2.85 + font-weight:normal; 2.86 +} 2.87 + 2.88 +/* drop down menu hover styles */ 2.89 +ul.menu li:hover ul * { 2.90 + background:#f1f1f1; 2.91 +}