Changeset 6

Timestamp:

21/08/06 14:05:16 (7 years ago)

Author:

dez

Message:

First stage of menu implementation:

• curved edges
• basic colour

Files:

• components/menu.php (modified) (1 diff)
• css/ie.css (modified) (1 diff)
• css/ielt7.css (modified) (1 diff)
• css/sucs.css (modified) (1 diff)

components/menu.php

@@ -1 +1 @@
         <div id="navigationC">
                 <ul>
-                        <li>News</li>
-                        <li>Info
+                        <li><a href="/"><span>News</span></a></li>
+                        <li><a href="">Info</a>
                         <ul>
-                                <li>Constitution</li>
-                                <li>Conditions</li>
-                                <li>Room Rules</li>
-                                <li>Donations</li>
-                                <li>Web Stats</li>
+                                <li><a href="">Constitution</a></li>
+                                <li><a href="">Conditions</a></li>
+                                <li><a href="">Room Rules</a></li>
+                                <li><a href="">Donations</a></li>
+                                <li><a href=""><span>Web Stats</span></a></li>
                         </ul>
                         </li>
-                        <li>Services
+                        <li><a href="">Services</a>
                         <ul>
-                                <li>About</li>
-                                <li>Library</li>
-                                <li>Mail Lists</li>
-                                <li>Web Mail</li>
-                                <li>Links</li>
-                                <li>Room</li>
-                                <li>Milliways</li>
+                                <li><a href="">About</a></li>
+                                <li><a href="">Library</a></li>
+                                <li><a href="">Mail Lists</a></li>
+                                <li><a href="">Web Mail</a></li>
+                                <li><a href="">Links</a></li>
+                                <li><a href="">Room</a></li>
+                                <li><a href=""><span>Milliways</span></a></li>
                         </ul>
                         </li>
-                        <li>Games</li>
-                        <li>People
+                        <li><a href=""><span>Games</span></a></li>
+                        <li><a href="">People</a>
                         <ul>
-                                <li>Staff</li>
-                                <li>Members</li>
-                                <li>Societies</li>
-                                <li>History</li>
-                                <li>Joining</li>
+                                <li><a href="">Staff</a></li>
+                                <li><a href="">Members</a></li>
+                                <li><a href="">Societies</a></li>
+                                <li><a href="">History</a></li>
+                                <li><a href=""><span>Joining</span></a></li>
                         </ul>
                         </li>
-                        <li>Help</li>
-                        <li>Planet</li>
+                        <li><a href=""><span>Help</span></a></li>
+                        <li><a href=""><span>Planet</span></a></li>
                 </ul>
         </div>

css/ie.css

@@ -3 +3 @@
         padding: 0;
 }
+
+#navigationC ul li {
+        line-height: 0;
+}
+

css/ielt7.css

@@ -27 +27 @@
 height: 100%; background: url('../images/right-bottom-corner.gif') bottom right no-repeat;
 }
+
+#navigationC ul li {
+        line-height: 0;
+}
+
+#navigationC ul li a {
+        background-image: url('../images/menu-top-right.gif');
+}
+
+#navigationC ul ul li a {
+        background: #ffc62b url('../images/menu-top-right.gif') norepeat top right;
+}
+
+#navigationC ul li a span {
+        background-image: url('../images/menu-bottom-right.gif');
+}

css/sucs.css

@@ -88 +88 @@
 
 #navigationC {
-padding-left: 0.5em;
+        padding-left: 0;
 }
 
 #navigationC ul {
-margin: 0; padding-left: 0; list-style-type: none;
+        margin: 0;
+        padding-left: 0;
+        list-style-type: none;
+}
+
+
+#navigationC ul li a {
+        display: block;
+        text-decoration: none;
+        font-weight: bold;
+        line-height: 1.5em;
+        font-size: 95%;
+        color: #ffc62b;
+        background: #e76808 url('../images/menu-top-right.png') no-repeat top right;
+        padding-left: 0.5em;
+        margin-bottom: 2px;
 }
 
 #navigationC ul ul {
-margin: 0; padding-left: 1em; list-style-type: none;
+        margin: 0;
+        list-style-type: none;
 }
+
+#navigationC ul ul li a {
+        font-size: 80%;
+        font-weight: normal;
+        padding-left: 1.3em;
+        background: #ffc62b;
+        color: #e76808;
+}
+
+#navigationC ul ul li:last-child a {
+        background: #ffc62b url('../images/menu-bottom-right.png') no-repeat bottom right;
+}
+
+#navigationC ul li a span {
+        display: block;
+        background: url('../images/menu-bottom-right.png') no-repeat bottom right;
+}
+
 
 #primary {