diff options
| author | substantialnoninfringinguser <substantialnoninfringinguser@gmail.com> | 2009-05-18 04:25:42 +0100 |
|---|---|---|
| committer | substantialnoninfringinguser <substantialnoninfringinguser@gmail.com> | 2009-05-18 04:25:42 +0100 |
| commit | 12009e36dfb7d34781a2e9bdf7a2ab4568a7c338 (patch) | |
| tree | a5d4077b0b2a5d9725ed9ac1b5738243d7c6d016 | |
| parent | 21c39f70de1fa20ae20933a761773e9b15ea1a11 (diff) | |
| download | troggle-12009e36dfb7d34781a2e9bdf7a2ab4568a7c338.tar.gz troggle-12009e36dfb7d34781a2e9bdf7a2ab4568a7c338.tar.bz2 troggle-12009e36dfb7d34781a2e9bdf7a2ab4568a7c338.zip | |
[svn] Turn main menu into dropdown (well actually, drop up) menu.
| -rw-r--r-- | media/css/main3.css | 31 | ||||
| -rw-r--r-- | media/js/base.js | 61 | ||||
| -rw-r--r-- | templates/base.html | 30 |
3 files changed, 73 insertions, 49 deletions
diff --git a/media/css/main3.css b/media/css/main3.css index 384d9b3..77657a0 100644 --- a/media/css/main3.css +++ b/media/css/main3.css @@ -1,20 +1,3 @@ -html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td
- {
-
- font-weight: inherit;
- font-style: inherit;
- font-size: 100%;
- font-family: inherit;
- vertical-align: baseline;
- }
-
html, body {
height: 100%;
}
@@ -343,16 +326,10 @@ h1 { #footerLinks{
position:fixed;
- text-align: center;
- bottom:0;
- left:0;
- width:100%;
- background-color:#000;
- color:#999
-}
-
-#footerLinks a{
- color:#FFF
+ bottom:0px;
+ padding: 0;
+ margin-left:130px;
+ margin-right:130px;
}
/*.fadeIn {
diff --git a/media/js/base.js b/media/js/base.js index 0dc562b..7a7ed5e 100644 --- a/media/js/base.js +++ b/media/js/base.js @@ -1,4 +1,22 @@ +/* The following serves to stretch the content div to the bottom of the margin images, or vice versa*/
+function contentHeight(){
+setMaxHeight($(".rightMargin,#content,.leftMargin,#col2"),$("#content"));
+};
+
+function setMaxHeight(group, target) {
+ tallest = 0;
+ group.each(function() {
+ thisHeight = $(this).height();
+ if(thisHeight > tallest) {
+ tallest = thisHeight;
+ }
+ });
+ target.height(tallest);
+}
+
+
+/*This is the jquery comment stuff */
$(document).ready(function() {
$('.searchable li').quicksearch({
@@ -19,6 +37,11 @@ $(".toggleEyeCandy").click(function () { $(".toggleEyeCandy").toggle();
});
+$(".toggleMenu").click(function () {
+ $("ul.dropdown li:not(.toggleMenu)").toggle();
+ $(".toggleMenu").toggle();
+ });
+
$(".nav").css('opacity','7')
$(".footer").hide();
$(".fadeIn").hide();
@@ -36,11 +59,11 @@ function linkHover(hoverLink,image){ $(hoverLink).hover(
function() {
$(image).fadeIn("slow");
- $(hoverLink).css("background","gray");
+/* $(hoverLink).css("background","gray");*/
},
function() {
$(image).fadeOut("slow");
- $(hoverLink).css("background","black");
+/* $(hoverLink).css("background","black");*/
}
);
@@ -48,27 +71,25 @@ $(hoverLink).hover( };
-linkHover("#expoWebsiteLink","#richardBanner");
-linkHover("#cuccLink","#timeMachine");
+linkHover("#cavesLink","#richardBanner");
+linkHover("#caversLink","#timeMachine");
linkHover("#surveyBinderLink","#surveyHover");
linkHover("#troggle","#timeMachine");
-
-});
-
-function contentHeight(){
-setMaxHeight($(".rightMargin,#content,.leftMargin,#col2"),$("#content"));
-};
-
-function setMaxHeight(group, target) {
- tallest = 0;
- group.each(function() {
- thisHeight = $(this).height();
- if(thisHeight > tallest) {
- tallest = thisHeight;
- }
+/*dropdown (well, up actually) menu code from http://css-tricks.com/simple-jquery-dropdowns/*/
+$("ul.dropdown li").hover(
+ function(){
+ $(this).addClass("hover");
+ $('ul:first',this).css('visibility','visible')
+ },
+
+ function(){
+ $(this).removeClass("hover");
+ $('ul:first',this).css('visibility', 'hidden');
});
- target.height(tallest);
-}
+ $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
+/* end dropdown menu code */
+
+});
diff --git a/templates/base.html b/templates/base.html index de1f73c..ff37cd0 100644 --- a/templates/base.html +++ b/templates/base.html @@ -3,10 +3,12 @@ <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="{{ settings.MEDIA_URL }}css/main3.css" />
+<link rel="stylesheet" type="text/css" href="{{ settings.MEDIA_URL }}css/dropdownNavStyle.css" />
<title>{% block title %}Troggle{% endblock %}</title>
<script src="{{ settings.MEDIA_URL }}js/jquery.js" type="text/javascript"></script>
<script src="{{ settings.MEDIA_URL }}js/jquery.quicksearch.js" type="text/javascript"></script>
<script src="{{ settings.MEDIA_URL }}js/base.js" type="text/javascript"></script>
+<script src="{{ settings.MEDIA_URL }}js/jquery.dropdown.js" type="text/javascript"></script>
<script language="javascript">
window.onload = contentHeight;
</script>
@@ -59,7 +61,31 @@ window.onload = contentHeight; {% endblock margins %}
-<div id="footerLinks">
+ <ul class="dropdown" id="footerLinks">
+
+ <li><a href="#">External links</a>
+ <ul class="sub_menu">
+ <li><a id="cuccLink" href="http://cucc.survex.com">CUCC website</a></li>
+ <li><a id="expoWebsiteLink" href="http://cucc.survex.com/expo">Expedition website</a></li>
+ </ul>
+ </li>
+ <li><a href="{% url frontpage %}">Troggle front page</a></li>
+ <li><a id="cavesLink" href="{% url caveindex %}">caves</a></li>
+ <li><a id="caversLink" href="{% url personindex %}">cavers</a></li>
+ <li><a id="surveyBinderLink" href="{% url survey %}">survey binder</a></li>
+ <li><a href="{% url stats %}">statistics</a></li>
+ <li><a href="{% url calendar 2008 %}">expedition calendar</a></li>
+ <li><a href="#">admin</a>
+ <ul class="sub_menu">
+ <li><a id="cuccLink" href="{% url controlpanel %}">Import / export data</a></li>
+ <li><a id="expoWebsiteLink" href="{{ settings.URL_ROOT }}/admin">Troggle administration pages</a></li>
+ </ul>
+ <li class="toggleMenu"><a href="#">hide menu</a></li>
+
+ </ul>
+ <div class="toggleMenu" style="display:none; position:fixed; bottom:0; right:130px"><a href="#">Show menu</a></li>
+
+<!--
<a id="cuccLink" href="http://cucc.survex.com">CUCC website</a> |
<a id="expoWebsiteLink" href="http://cucc.survex.com/expo">Expedition website</a> |
External links |
@@ -70,6 +96,6 @@ window.onload = contentHeight; <a href="{% url stats %}"> Statistics</a> |
<a href="{% url calendar 2008 %}">Expedition calendar</a>
</div>
-
+-->
</body>
</html>
|