Line 15: | Line 15: | ||
/* Wrapper for the menu */ | /* Wrapper for the menu */ | ||
− | + | /* main menu */ | |
− | # | + | #ddmenu { |
− | + | display: block; | |
− | + | font-family: "Arial Narrow", Helvetica, Arial, sans-serif; | |
− | + | text-align: center; /*Specify the alignment of the whole UL if UL is not width:100%;*/ | |
− | + | letter-spacing: normal; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | # | + | |
− | + | #ddmenu ul { | |
− | + | margin:0 auto; | |
− | + | padding: 0; | |
− | + | text-align: center; /* Alignment of each top-level menu items within the UL */ | |
− | + | width: 100%; | |
− | + | font-size: 0; | |
+ | background: #3b5f41; | ||
+ | display: inline-block; | ||
+ | list-style: none; | ||
+ | position: relative; | ||
+ | z-index: 999999990; | ||
+ | border:none; | ||
+ | border-radius:2px; | ||
} | } | ||
− | # | + | |
− | + | #ddmenu li { | |
+ | margin:0; | ||
+ | padding:0; | ||
+ | font-size: 15px; | ||
+ | display: inline-block; | ||
+ | *display: inline; | ||
+ | zoom: 1; /*for IE6-7*/ | ||
+ | position: relative; | ||
+ | color: #EEE; | ||
+ | line-height: 50px; /*This determines the height of the menu*/ | ||
+ | vertical-align:middle; | ||
+ | transition: background-color 0.2s; | ||
+ | outline:none; | ||
+ | -moz-user-select:none; | ||
+ | -webkit-user-select: none; | ||
+ | -ms-user-select: none; | ||
} | } | ||
− | # | + | |
− | + | #ddmenu .full-width { | |
− | + | position: static; | |
− | + | ||
} | } | ||
− | # | + | |
− | + | #ddmenu { | |
+ | color:#FFF; | ||
+ | background-color: rgba(255,255,255,0.15); | ||
+ | background-color: #999 \9; /*fallback for old IE*/ | ||
} | } | ||
− | # | + | |
− | + | ||
− | + | #ddmenu .top-heading { | |
− | + | font-weight: bold; | |
− | + | margin:0 22px; | |
+ | color: inherit; | ||
+ | text-decoration: none; | ||
+ | display:inline-block; | ||
+ | outline: 0; | ||
+ | cursor: pointer; | ||
} | } | ||
− | + | ||
− | + | /*Style for project description*/ | |
− | + | ||
+ | h3{color: #006633}; | ||
+ | h2{color: #006633}; | ||
+ | |||
+ | |||
+ | /* links of top-heading */ | ||
+ | #ddmenu a, #ddmenu a:link, #ddmenu a:hover | ||
+ | { | ||
+ | color:inherit; | ||
} | } | ||
− | # | + | #ddmenu li:hover |
− | + | { | |
− | + | background-color:#66a96b; | |
} | } | ||
− | # | + | |
− | + | #ddmenu a:hover | |
+ | { | ||
+ | text-decoration:underline; | ||
+ | |||
} | } | ||
− | # | + | |
− | + | #ddmenu a:focus | |
− | + | { | |
− | + | outline:1px dotted #09F; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | # | + | |
− | + | /* caret(arrow icon) */ | |
+ | #ddmenu .caret { | ||
+ | color: inherit; | ||
+ | left:-18px; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | overflow: hidden; /*for IE6*/ | ||
+ | vertical-align: middle; | ||
+ | margin-bottom: 2px; | ||
+ | border-top: 4px solid; /*caret size is 4px now*/ | ||
+ | border-right: 4px solid transparent; | ||
+ | border-left: 4px solid transparent; | ||
+ | display: inline-block; | ||
+ | position:relative; | ||
} | } | ||
− | # | + | |
− | + | /* sub-menu layout | |
− | + | ----------------------------*/ | |
− | + | ||
− | + | #ddmenu .dropdown { | |
− | + | width: auto; | |
− | + | left: 0px; | |
+ | color: #000000; | ||
+ | padding:0;margin:0;display:none;position:absolute;overflow:hidden; | ||
+ | top: 100%; | ||
+ | border:1px solid #CCC; | ||
+ | border-top:none; | ||
+ | border-radius:0 0 4px 4px; | ||
+ | box-shadow: 0px 4px 4px rgba(0,0,0,0.14); | ||
} | } | ||
− | # | + | |
− | + | #ddmenu .full-width .dropdown { | |
− | + | width: 100%; | |
− | + | padding: 0; | |
− | + | margin: 0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | # | + | #ddmenu .offset300 { |
− | + | left: -300px;right:auto; | |
} | } | ||
− | # | + | |
− | + | #ddmenu .right-aligned { | |
+ | left: auto; | ||
+ | right: 0px; | ||
} | } | ||
− | + | ||
− | # | + | #ddmenu .over .dropdown { |
− | + | display: block; | |
− | + | ||
} | } | ||
− | # | + | |
− | + | #ddmenu .dd-inner { | |
− | + | text-align: center; | |
− | + | padding: 20px; | |
− | + | margin:0px; | |
+ | background-color: #EEEEEE; | ||
+ | white-space: nowrap; | ||
+ | font-size: 13px; | ||
} | } | ||
− | # | + | |
− | + | #ddmenu ul ul | |
− | + | { | |
− | + | margin:0;padding:0;text-align:left;width:auto;background:none;border:none;display:block;position:static;z-index:0;border-radius:0; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | # | + | |
− | + | #ddmenu ul ul li | |
+ | { | ||
+ | font-size:13px; | ||
+ | padding:6px 0; /*It determines the line height*/ | ||
+ | color:inherit; | ||
+ | line-height:1; | ||
+ | margin:0;display:block;position:static;background:none;border:none;transition:none;border-radius:0; | ||
} | } | ||
− | + | ||
− | + | /* links in sub menu | |
− | + | ----------------------------*/ | |
− | + | ||
− | + | #ddmenu .dropdown a { | |
− | + | color: #333333; | |
− | + | line-height:1; | |
− | + | text-decoration:none; | |
− | + | transition:color 0.4s; | |
− | + | ||
} | } | ||
− | # | + | |
− | + | #ddmenu .dropdown a:hover, #ddmenu .dropdown a:focus { | |
− | + | text-decoration: underline; | |
− | + | color: #0099FF; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | /* blocks within the sub-menu | |
− | + | -----------------------------*/ | |
+ | #ddmenu .column { | ||
+ | text-align: left; | ||
+ | vertical-align: top; /*or middle*/ | ||
+ | display: inline-block; | ||
+ | *display: inline;*zoom: 1; | ||
+ | white-space:normal; | ||
+ | width:auto;min-width:200px; | ||
+ | padding:0 30px; | ||
+ | border-right:1px solid #999; | ||
} | } | ||
− | # | + | |
− | + | #ddmenu .dd-inner ul:last-child { | |
− | + | border-right: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | # | + | |
− | + | #ddmenu .column h3 { | |
+ | font-weight: 500; | ||
+ | line-height: 1.1; | ||
+ | margin-top: 12px; | ||
+ | margin-bottom: 8px; | ||
+ | font-size: 24px; | ||
} | } | ||
+ | |||
+ | #ddmenu li { | ||
+ | border-left:1px solid #273f2b; | ||
+ | border-right:1px solid #304f36; } | ||
+ | #ddmenu li:first-child {border-left:none;} | ||
+ | #ddmenu li:last-child {border-right:none;} | ||
+ | |||
+ | #ddmenuLink {display:none;} | ||
+ | |||
+ | |||
Line 542: | Line 574: | ||
− | < | + | <nav id="ddmenu"> |
− | < | + | <div class="menu-icon"></div> |
− | < | + | <ul> |
− | + | <li class="no-sub"><a class="top-heading" href="https://2016.igem.org/Team:Virginia">Home</a></li> | |
− | + | <li class="full-width"> | |
− | + | <a class="top-heading"href="https://2016.igem.org/Team:Virginia/Team">Team</a> | |
− | + | <i class="caret"></i> | |
− | + | <div class="dropdown"> | |
− | + | <div class="dd-inner"> | |
− | + | <ul class="column"> | |
− | </ | + | <li><h3>LAm3</h3></li> |
− | < | + | <li><a href="#">Anders</a></li> |
+ | <li><a href="#">Dan</a></li> | ||
+ | <li><a href="#">Chris</a></li> | ||
+ | <li><a href="#">Austin</a></li> | ||
+ | <li><a href="#">Kelli</a></li> | ||
+ | </ul> | ||
+ | <ul class="column"> | ||
+ | <li><h3>Cool i guess</h3></li> | ||
+ | <li><a href="#">Sarah</a></li> | ||
+ | <li><a href="#">Mark/a></li> | ||
+ | <li><a href="#">Raquel</a></li> | ||
+ | <li><a href="#">Madeleine</a></li> | ||
+ | <li><a href="#">Nivedha</a></li> | ||
+ | </ul> | ||
+ | <ul class="column mayHide"> | ||
+ | <li><br /><img src="/ddmenu/skins/img1.jpg" /></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a class="top-heading" href="https://2016.igem.org/Team:Virginia/Project">Project</a> | ||
+ | <i class="caret"></i> | ||
+ | <div class="dropdown"> | ||
+ | <div class="dd-inner"> | ||
+ | <ul class="column"> | ||
+ | <li><h3>Vestibulum Ut</h3></li> | ||
+ | <li><a href="#">Nunc pharetra</a></li> | ||
+ | <li><a href="#">Vestibulum ante</a></li> | ||
+ | <li><a href="#">Nulla id laoreet</a></li> | ||
+ | <li><a href="#">Elementum blandit</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a class="top-heading"href="https://2016.igem.org/Team:Virginia/Parts">Parts</a> | ||
+ | <i class="caret"></i> | ||
+ | <div class="dropdown offset300"> | ||
+ | <div class="dd-inner"> | ||
+ | <ul class="column"> | ||
+ | <li><h3>Pellentesque</h3></li> | ||
+ | <li><a href="#">Fermentum ut nulla</a></li> | ||
+ | <li><a href="#">Duis ut mauris</a></li> | ||
+ | <li><h3>Volutpat</h3></li> | ||
+ | <li><a href="#">Quisque dictum</a></li> | ||
+ | <li><a href="#">Nulla scelerisque</a></li> | ||
+ | </ul> | ||
+ | <ul class="column"> | ||
+ | <li><h3>Suspendisse</h3></li> | ||
+ | <li><a href="#">Suspendisse potenti</a></li> | ||
+ | <li><a href="#">Curabitur in mauris</a></li> | ||
+ | <li><a href="#">Phasellus ultrices</a></li> | ||
+ | <li><a href="#">Quisque ornare</a></li> | ||
+ | <li><a href="#">Vestibulum</a></li> | ||
+ | <li><a href="#">Vitae tempus risus</a></li> | ||
+ | </ul> | ||
+ | <ul class="column mayHide"> | ||
+ | <li><br /><img src="/ddmenu/skins/img2.jpg" /></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li class="no-sub"> | ||
+ | <a class="top-heading" href="https://2016.igem.org/Team:Virginia/Safety">Safety</a> | ||
+ | </li> | ||
+ | <li class="no-sub"> | ||
+ | <a class="top-heading"href="https://2016.igem.org/Team:Virginia/Attributions">Attributions</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a class="top-heading"href="https://2016.igem.org/Team:Virginia/Human_Practices">Human Practices</a> | ||
+ | <i class="caret"></i> | ||
+ | <div class="dropdown right-aligned"> | ||
+ | <div class="dd-inner"> | ||
+ | <ul class="column"> | ||
+ | <li><h3>Nam a leo</h3></li> | ||
+ | <li><a href="#">Vel faucibus leo</a></li> | ||
+ | <li><a href="#">Duis ut mauris</a></li> | ||
+ | <li><a href="#">In tempus semper</a></li> | ||
+ | <li><a href="#">laoreet erat</a></li> | ||
+ | </ul> | ||
+ | <ul class="column"> | ||
+ | <li><h3>Proin iaculis</h3></li> | ||
+ | <li><a href="#">In tempus semper</a></li> | ||
+ | <li><a href="#">Hendrerit tincidunt</a></li> | ||
+ | <li><a href="#">Duis ut mauris</a></li> | ||
+ | <li><a href="#">pretium amet</a></li> | ||
+ | </ul> | ||
+ | <li class="no-sub"> | ||
+ | <a class="top-heading" href="https://2016.igem.org/Team:Virginia/Awards">Awards</a> | ||
+ | </li> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </nav> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | <script> | ||
+ | // This is the jquery part of your template. Try not modify any of this code since it makes your menu work. | ||
+ | $(document).ready(function() { | ||
− | + | $("#HQ_page").attr('id',''); | |
+ | |||
+ | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | $('#accordion').find('.menu_item').hover(function(){ | |
− | + | ||
− | + | //Expand or collapse this panel | |
− | + | submenu = $(this).find('.submenu'); | |
− | + | submenu.toggle(); | |
− | + | ||
− | + | icon = $(this).find('.icon'); | |
− | + | ||
− | + | if ( !$( submenu ).is(':visible') ) { | |
− | + | icon.removeClass("less").addClass("plus"); | |
− | + | } | |
− | + | else { | |
− | + | icon.removeClass("plus").addClass("less"); | |
− | + | } | |
− | + | ||
− | + | //Hide the other panels | |
− | + | $(".submenu").not(submenu).hide(); | |
+ | $(".icon").not(icon).removeClass("less").addClass("plus"); | ||
+ | }); | ||
+ | |||
+ | |||
+ | $(".collapsable_menu_control").hover(function() { | ||
+ | $(".menu_item").toggle(); | ||
+ | }); | ||
+ | |||
+ | $( window ).resize(function() { | ||
+ | $(".menu_item").show(); | ||
+ | }); | ||
+ | |||
+ | |||
+ | }); | ||
+ | |||
</script> | </script> |
Revision as of 15:44, 30 June 2016