kytv/I2P_Website
1
0
Fork 0
forked from I2P_Developers/i2p.www
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Overhauled the dropdown menus

Browse Source
This commit is contained in:
str4d
2012-09-13 23:42:20 +00:00
parent eef5f3fc8c
commit 2c982e8262
4 changed files with 201 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
i2p2www/pages/global/lang.html
View File

@@ -5,7 +5,7 @@
{%- else -%}{{ url_for('site_show', lang=lang) }}
{%- endif -%}
{%- endmacro -%}
<ul class="languages nav">
<ul class="languages">
<li><a href="{{ change_lang('en') }}"><img src="{{ url_for('static', filename='images/us.png') }}" alt="English" /></a></li>
<li><a href="{{ change_lang('es') }}"><img src="{{ url_for('static', filename='images/es.png') }}" alt="Castellano" /></a></li>
<li><a href="{{ change_lang('zh') }}"><img src="{{ url_for('static', filename='images/zh.png') }}" alt="Chinese" /></a></li>

1
i2p2www/pages/global/layout.html
View File

@@ -14,7 +14,6 @@
<div class="title">{{ self.title() }}</div>
</div>
<div class="navigation">
{% include "global/lang.html" %}
{% include "global/nav.html" %}
</div>
<div id="content">

70
i2p2www/pages/global/nav.html
View File

@@ -1,42 +1,54 @@
<ul class="sections nav">
<li><a href="{{ url_for('site_show', lang=g.lang) }}">Home</a></li>
<li><a href="{{ url_for('downloads_list', lang=g.lang) }}">Download</a></li>
<li><a href="#">Docs</a>
<div id="cssmenu">
<ul>
<li><a href="{{ url_for('site_show', lang=g.lang) }}"><span>Home</span></a></li>
<li><a href="{{ url_for('downloads_list', lang=g.lang) }}"><span>Download</span></a></li>
<li class="has-sub"><a href="#"><span>Docs</span></a>
<ul>
<li><a href="{{ url_for('site_show', lang=g.lang, page='docs/how') }}">&nbsp;How does it work?</a></li>
<li><a href="{{ url_for('site_show', lang=g.lang, page='docs/techintro') }}">&nbsp;Tech intro</a></li>
<li><a href="howto.html">&nbsp;Howto docs</a></li>
<li><a href="applications.html">&nbsp;Applications</a></li>
<li class="has-sub"><a href="{{ url_for('site_show', lang=g.lang, page='docs/how') }}"><span>How does it work?</span></a>
<ul>
<li><a href="{{ url_for('site_show', lang=g.lang, page='docs/how/intro') }}"><span>Gentle intro</span></a></li>
<li><a href="{{ url_for('site_show', lang=g.lang, page='docs/techintro') }}"><span>Tech intro</span></a></li>
</ul>
</li>
<li><a href="howto.html"><span>Howto docs</span></a></li>
<li><a href="applications.html"><span>Applications</span></a></li>
</ul>
</li>
<li><a href='#'>Support</a></li>
<li><a href="getinvolved.html">Develop</a>
<li class="has-sub"><a href="#"><span>Support</span></a>
<ul>
<li><a href="api.html">&nbsp;API</a></li>
<li><a href="licenses.html">&nbsp;Licenses</a></li>
<li><a href="http://trac.i2p2.i2p/">&nbsp;Trac</a></li>
<li><a href="faq.html"><span>FAQ</span></a></li>
<li><a href="http://forum.i2p2.de/"><span>Forums</span></a></li>
</ul>
</li>
<li><a href='#'>Volunteer</a></li>
<li><a href="#">News</a>
<li class="has-sub"><a href="getinvolved.html"><span>Develop</span></a>
<ul>
<li><a href="api.html"><span>API</span></a></li>
<li><a href="licenses.html"><span>Licenses</span></a></li>
<li><a href="http://trac.i2p2.i2p/"><span>Trac</span></a></li>
</ul>
</li>
<li><a href="#"><span>Volunteer</span></a></li>
<li class="has-sub"><a href="#"><span>News</span></a>
<ul class="leftbutton">
<li><a href="{{ url_for('blog_index', lang=g.lang) }}">&nbsp;Announcements</a></li>
<li><a href="{{ url_for('meetings_index', lang=g.lang) }}">&nbsp;Meetings</a></li>
<li><a href="roadmap.html">&nbsp;Roadmap</a></li>
<li><a href="todo.html">&nbsp;Task list</a></li>
<li><a href="{{ url_for('blog_index', lang=g.lang) }}"><span>Announcements</span></a></li>
<li><a href="{{ url_for('meetings_index', lang=g.lang) }}"><span>Meetings</span></a></li>
<li><a href="roadmap.html"><span>Roadmap</span></a></li>
<li><a href="todo.html"><span>Task list</span></a></li>
</ul>
</li>
<li><a href="#">About</a>
<li class="has-sub"><a href="#"><span>About</span></a>
<ul>
<li><a href="faq.html">&nbsp;FAQ</a></li>
<li><a href="http://forum.i2p2.de/">&nbsp;Forums</a></li>
<li><a href="bounties.html">&nbsp;Bounties</a></li>
<li><a href="getinvolved.html">&nbsp;Get involved</a></li>
<li><a href="donate.html">&nbsp;Donate!</a></li>
<li><a href="team.html">&nbsp;I2P Team</a></li>
<li><a href="halloffame.html">&nbsp;Hall of Fame</a></li>
<li><a href="links.html">&nbsp;Links</a></li>
<li><a href="impressum.html">&nbsp;Impressum</a></li>
<li><a href="bounties.html"><span>Bounties</span></a></li>
<li><a href="getinvolved.html"><span>Get involved</span></a></li>
<li><a href="donate.html"><span>Donate!</span></a></li>
<li><a href="team.html"><span>I2P Team</span></a></li>
<li><a href="halloffame.html"><span>Hall of Fame</span></a></li>
<li><a href="links.html"><span>Links</span></a></li>
<li><a href="impressum.html"><span>Impressum</span></a></li>
</ul>
</li>
<li class="has-sub right"><a href="#"><span>Language</span></a>
{% include "global/lang.html" %}
</li>
</ul>
</div>

183
i2p2www/static/styles/duck.css
View File

@@ -20,30 +20,165 @@ div#branding {width:80%; margin:1em auto; position:relative;}
}
div.navigation {position:relative;}
ul.nav li {display:inline-block; *display:inline; *zoom:1;}
ul.languages {width:130px; position:absolute; right:10%; top:0;}
ul.sections {margin:1em 10%; padding-right:130px;}
ul.sections li {
font-size:2em; font-family:"URW Gothic L", "Century Gothic", sans-serif;
font-weight:bold; margin:0 1.3em 0 0; text-shadow:1px 1px 1px rgba(100,20,20,.2);
position:relative;}
ul.sections li ul {display:none; padding:1px; z-index:1;}
ul.sections li:hover ul, ul.sections li a:hover ul {
display:block; position:absolute; margin:0; top:24px; left:-1px; height:auto;
width:13.5em; background:black;}
ul.sections li:hover ul li a, u.sections li a:hover ul li a {
border:0; margin:0; padding:0; height:auto;
width:13.5em; background:#d8d8d8;}
ul.sections li:hover ul li:hover a, u.sections li a:hover ul li a:hover {
background:white;}
ul.sections li:hover ul li ul, ul.sections li a:hover ul li a ul {visibility:hidden;}
ul.sections li:hover ul li:hover ul, ul.sections li a:hover ul li a:hover ul {
visibility:visible; position:absolute; margin-top:-1px; top:0;
left:8.08333em; width:14em;}
ul.sections li:hover ul li:hover ul li a, ul.sections li a:hover ul li a:hover ul li a {
width:14em; background:#d8d8d8;}
ul.sections li:hover ul li:hover ul li a:hover, ul.sections li a:hover ul li a:hover ul li a:hover {
width:14em; background:white;}
ul.languages {margin: 0 2px !important;}
ul.languages li {display:inline-block; *display:inline; *zoom:1; margin: 0 -2px !important;}
/* Dropdown menu CSS */
menu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
height: 49px;
background: #141414;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
border-bottom: 2px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #141414;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
color: #ffffff;
display: inline-block;
font-family: "URW Gothic L", "Century Gothic", sans-serif;
font-size: 11pt;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(100,20,20,.2);
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: left;
padding: 0 10%;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li.right {
position: absolute;
right: 10%;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
}
#cssmenu > ul > li:hover > a {
background: #070707;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #6fc7ec;
filter: none;
font-size: 9pt;
display: block;
line-height: 120%;
padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #095c80;
}
/* End of dropdown menu CSS */
div#content {display:block;}
/**