xle/troggle-unchained
2
0
Fork 0
forked from expo/troggle
Code Issues 4 Pull Requests Projects 1 Wiki Activity

[svn] Turn main menu into dropdown (well actually, drop up) menu.

Browse Source
This commit is contained in:
substantialnoninfringinguser 2009-05-18 04:25:42 +01:00
parent 4a42396774
commit d99f44650c
3 changed files with 73 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
media/css/main3.css
View File

@ -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 { html, body {
height: 100%; height: 100%;
} }
@ -343,16 +326,10 @@ h1 {
#footerLinks{ #footerLinks{
position:fixed; position:fixed;
text-align: center; bottom:0px;
bottom:0; padding: 0;
left:0; margin-left:130px;
width:100%; margin-right:130px;
background-color:#000;
color:#999
}
#footerLinks a{
color:#FFF
} }
/*.fadeIn { /*.fadeIn {

61
media/js/base.js
View File

@ -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() { $(document).ready(function() {
$('.searchable li').quicksearch({ $('.searchable li').quicksearch({
@ -19,6 +37,11 @@ $(".toggleEyeCandy").click(function () {
$(".toggleEyeCandy").toggle(); $(".toggleEyeCandy").toggle();
}); });
$(".toggleMenu").click(function () {
$("ul.dropdown li:not(.toggleMenu)").toggle();
$(".toggleMenu").toggle();
});
$(".nav").css('opacity','7') $(".nav").css('opacity','7')
$(".footer").hide(); $(".footer").hide();
$(".fadeIn").hide(); $(".fadeIn").hide();
@ -36,11 +59,11 @@ function linkHover(hoverLink,image){
$(hoverLink).hover( $(hoverLink).hover(
function() { function() {
$(image).fadeIn("slow"); $(image).fadeIn("slow");
$(hoverLink).css("background","gray"); /* $(hoverLink).css("background","gray");*/
}, },
function() { function() {
$(image).fadeOut("slow"); $(image).fadeOut("slow");
$(hoverLink).css("background","black"); /* $(hoverLink).css("background","black");*/
} }
); );
@ -48,27 +71,25 @@ $(hoverLink).hover(
}; };
linkHover("#expoWebsiteLink","#richardBanner"); linkHover("#cavesLink","#richardBanner");
linkHover("#cuccLink","#timeMachine"); linkHover("#caversLink","#timeMachine");
linkHover("#surveyBinderLink","#surveyHover"); linkHover("#surveyBinderLink","#surveyHover");
linkHover("#troggle","#timeMachine"); linkHover("#troggle","#timeMachine");
/*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');
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
/* end dropdown menu code */
}); });
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);
}

30
templates/base.html
View File

@ -3,10 +3,12 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <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/main3.css" />
<link rel="stylesheet" type="text/css" href="{{ settings.MEDIA_URL }}css/dropdownNavStyle.css" />
<title>{% block title %}Troggle{% endblock %}</title> <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.js" type="text/javascript"></script>
<script src="{{ settings.MEDIA_URL }}js/jquery.quicksearch.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/base.js" type="text/javascript"></script>
<script src="{{ settings.MEDIA_URL }}js/jquery.dropdown.js" type="text/javascript"></script>
<script language="javascript"> <script language="javascript">
window.onload = contentHeight; window.onload = contentHeight;
</script> </script>
@ -59,7 +61,31 @@ window.onload = contentHeight;
{% endblock margins %} {% 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="cuccLink" href="http://cucc.survex.com">CUCC website</a> |
<a id="expoWebsiteLink" href="http://cucc.survex.com/expo">Expedition website</a> | <a id="expoWebsiteLink" href="http://cucc.survex.com/expo">Expedition website</a> |
External links | External links |
@ -70,6 +96,6 @@ window.onload = contentHeight;
<a href="{% url stats %}"> Statistics</a> | <a href="{% url stats %}"> Statistics</a> |
<a href="{% url calendar 2008 %}">Expedition calendar</a> <a href="{% url calendar 2008 %}">Expedition calendar</a>
</div> </div>
-->
</body> </body>
</html> </html>