Template:AboutMenu: Difference between revisions

From Open Source Ecology
Jump to navigation Jump to search
No edit summary
No edit summary
 
(32 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
<html>
<style>
<style>
.menu-list
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
.menu-list ul
{
{
text-align: center;
text-align: center;
font-family: 'Ubuntu', ubuntu, sans-serif;
margin: 0;
}
}


.menu-list li
.menu-list ul li ul a
{
color: #888;
}
 
.menu-list ul li ul a:hover
{
color: #000;
text-decoration: none;
font-weight: bold;
}
 
.menu-list ul li
{
{
display: inline-block;
display: inline-block;
text-align: center;
text-align: center;
width: 6%;
width: 125px; /*6%;*/
margin-right: 10px;
vertical-align: top;
vertical-align: top;
position: relative;
padding-bottom: 12px;
}
}


.menu-list li ul
.menu-list ul li ul
{
{
display: none;
display: none;
position: absolute;
top: 98px;
width: 100%;
background-color: #fff;
font-family: arial;
border: 1px solid #aaa;
padding: 9px 0;
}
}


.menu-list ul li:hover ul
{
display: block;
}


.menu-list li:hover ul
.menu-list ul li ul li
{
{
display: block;
display: block;
width: 100%;
padding: 2px 0;
font-size: 1.5em;
}
}


Line 28: Line 60:
{
{
color: #000;
color: #000;
height: 32px;
display: block;
}
}
.menu-text:hover
.menu-text:hover
{
{
color: #0EBFE9;
text-decoration: none;
}
/* hover menu effect */
.over
{
font-size: 2em;
padding-top: 67px;
}
 
.financials
{
background: url('//opensourceecology.org/w/images/8/80/Financials_-_Black_copy.png') no-repeat scroll left top transparent;
}
}


.sucker-menu{clear:both;margin-top:-3px;background:url("tl_files/layout_images/menu-grad-004.png") left top repeat-x;border-top:1px solid #004;border-bottom:1px solid #004;font-weight:bold;font-size:80%;min-height: 2em;}
li:hover .financials
.sucker-menu ul{margin:0 auto;padding:0;list-style-type:none;min-height: 1.25em;}
{
.sucker-menu li{width:16%;position:relative;float:left;margin:0;padding:0;text-align:center;list-style-type:none;background-color: transparent;}
background: url('//opensourceecology.org/w/images/3/34/Financials_-_Colored_copy.png') no-repeat scroll left top transparent;
.sucker-menu ul li.first{border-left: 0;}
}
.sucker-menu ul.level_1 li.first:hover{border-left: 0;}
.sucker-menu ul.level_1 li:hover{background-color:#0117a7;border-right:1px solid #001075;border-left:1px solid #001075;}
.sucker-menu ul li{border-left:1px solid #4c00da;border-right: 1px solid #004;}
.sucker-menu ul.level_2 li{border: 0;}
.sucker-menu ul li a:hover,.sucker-menu ul li span:hover{}
.sucker-menu li ul{width:100%;left:0;top:1.5em;position:absolute;display:none;background-color:#FFF;border:1px solid #004;}
.sucker-menu ul li ul li{width:100%;border: 0;}
.sucker-menu ul li ul li a,.sucker-menu ul li ul li span{font-size:95%;color:#444;}
.sucker-menu ul.level_1 li ul.level_2 li:hover{background-color:#eeeeff;border: 0;}
.sucker-menu li > ul{top:auto;}
.sucker-menu li:hover ul{display:block;z-index: 1;}
.sucker-menu ul li a,.sucker-menu ul li span{display:block;margin-top:1px;padding:5px 0 6px;text-decoration:none;font-size:115%;color:#fff;background: inherit;}


</style>
.legal {
<ul class="menu-list">
background: url('//opensourceecology.org/w/images/2/21/Legal_-_Black_copy.png') no-repeat scroll left top transparent;
<li><img src="http://opensourceecology.org/w/images/2/27/Get_involved.png" /><div class="menu-text">Mission</div>
}
<ul class="menu-list-layer2">
li:hover .legal {
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
background: url('//opensourceecology.org/w/images/3/3f/Legal_-_Colored_copy.png') no-repeat scroll left top transparent;
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
}
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
</ul>
</li>


<li><img src="http://opensourceecology.org/w/images/2/27/Get_involved.png" /><div class="menu-text">Results</div>
.mission {
<ul class="menu-list-layer2">
background: url('//opensourceecology.org/w/images/4/4d/Mission_-_Black_copy.png') no-repeat scroll left top transparent;
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
}
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
li:hover .mission {
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
background: url('//opensourceecology.org/w/images/c/c8/Mission_-_Colored_copy.png ') no-repeat scroll left top transparent;
</ul>
}
</li>


<li><img src="http://opensourceecology.org/w/images/2/27/Get_involved.png" /><div class="menu-text">People</div>
.people {
<ul class="menu-list-layer2">
background: url('//opensourceecology.org/w/images/9/97/People_-_Black_copy.png') no-repeat scroll left top transparent;
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
}
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
li:hover .people
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
{
</ul>
background: url('//opensourceecology.org/w/images/9/96/People_-_Colored_copy.png ') no-repeat scroll left top transparent;
</li>
}


<li><img src="http://opensourceecology.org/w/images/2/27/Get_involved.png" /><div class="menu-text">Financials</div>
.planning {
<ul class="menu-list-layer2">
background: url('//opensourceecology.org/w/images/3/3c/Planning_-_Black_copy.png') no-repeat scroll left top transparent;
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
}
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
li:hover .planning {
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
background: url('//opensourceecology.org/w/images/3/38/Planning_-_Colored_copy.png ') no-repeat scroll left top transparent;
</ul>
}
</li>


<li><img src="http://opensourceecology.org/w/images/2/27/Get_involved.png" /><div class="menu-text">Planning</div>
.results {
<ul class="menu-list-layer2">
background: url('//opensourceecology.org/w/images/2/2d/Results_-_Black.png') no-repeat scroll left top transparent;
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
}
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
li:hover .results {
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
background: url('//opensourceecology.org/w/images/c/c0/Results_-_Colored.png') no-repeat scroll left top transparent;
</ul>
}
</li>


<li><img src="http://opensourceecology.org/w/images/2/27/Get_involved.png" /><div class="menu-text">Legal</div>
</style>
<ul class="menu-list-layer2">
<div class="menu-list">
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
<ul>
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
<li><a class="menu-text over mission">Mission</a>
<li><a href=""><img src="http://opensourceecology.org/w/images/" /><div class="menu-text">Mission</div></a></li>
<ul class="menu-list-layer2">
</ul>
<li><a href="">Mission</a></li>
</li>
<li><a href="">Mission</a></li>
</ul>
<li><a href="">Mission</a></li>
</ul>
</li>
<li><a class="menu-text over results">Results</a>
<ul class="menu-list-layer2">
<li><a href="">Mission</a></li>
<li><a href="">Mission</a></li>
</ul>
</li>
<li><a class="menu-text over planning">Planning</a>
<ul class="menu-list-layer2">
<li><a href="">Mission</a></li>
<li><a href="">Mission</a></li>
<li><a href="">Mission</a></li>
</ul>
</li>
<li><a class="menu-text over people">People</a>
<ul class="menu-list-layer2">
<li><a href="">Mission</a></li>
<li><a href="">Mission</a></li>
<li><a href="">Mission</a></li>
</ul>
</li>
<li><a class="menu-text over financials">Financials</a>
<ul class="menu-list-layer2">
<li><a href="">Mission</a></li>
<li><a href="">Mission</a></li>
<li><a href="">Mission</a></li>
</ul>
</li>
<li><a class="menu-text over legal">Legal</a>
<ul class="menu-list-layer2">
<li><a href="">Mission</a></li>
<li><a href="">Mission</a></li>
<li><a href="">Mission</a></li>
</ul>
</li>
</ul>
</div>


</html>
</html>

Latest revision as of 19:36, 16 December 2012

Retrieved from "https://wiki.opensourceecology.org/index.php?title=Template:AboutMenu&oldid=84297"