|
|
Line 1: |
Line 1: |
- | <html>
| + | {{Team:UC_Davis/Head}} |
- | | + | |
- | <head>
| + | |
- | | + | |
- | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
| + | |
- | | + | |
- | <script>
| + | |
- | /* jQuery Gooey Menu
| + | |
- | * Created: April 7th, 2011 by DynamicDrive.com. This notice must stay intact for usage
| + | |
- | * Author: Dynamic Drive at http://www.dynamicdrive.com/
| + | |
- | * Visit http://www.dynamicdrive.com/ for full source code
| + | |
- | */
| + | |
- | | + | |
- | jQuery.noConflict()
| + | |
- | | + | |
- | jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/
| + | |
- | if (s == undefined) s = 1.70158;
| + | |
- | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
| + | |
- | }
| + | |
- | }) | + | |
- | | + | |
- | | + | |
- | var gooeymenu={
| + | |
- | effectmarkup: '<li class="active"></li>',
| + | |
- | | + | |
- | setup:function(usersetting){
| + | |
- | jQuery(function($){ //on document.ready
| + | |
- | function snapback(dur){
| + | |
- | if ($selectedlink.length>0)
| + | |
- | $effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx)
| + | |
- | }
| + | |
- | var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting)
| + | |
- | var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL
| + | |
- | var $menulinks=$menu.find('li a')
| + | |
- | var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top, height:$menulinks.eq(0).outerHeight(), zIndex:-1}).appendTo($menu) //add trailing effect LI to the menu UL
| + | |
- | $effectref.css({left:-$menu.offset().left-$effectref.outerWidth()-5}) //position effect LI behind the left edge of the window
| + | |
- | if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined
| + | |
- | var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected')
| + | |
- | }
| + | |
- | else{
| + | |
- | var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined
| + | |
- | }
| + | |
- | setting.defaultselectedBool=$selectedlink.length
| + | |
- | $menulinks.mouseover(function(){
| + | |
- | clearTimeout(setting.snapbacktimer)
| + | |
- | var $target=$(this)
| + | |
- | //alert($target.position().left+" "+$target.get(0).offsetLeft)
| + | |
- | | + | |
- | $effectref.dequeue().animate({left:$target.position().left, width:$target.outerWidth()}, setting.fxtime, setting.fx)
| + | |
- | if (setting.defaultselectedBool==0) //if there is no default selected menu item
| + | |
- | $selectedlink=$target //set current mouseover element to selected element
| + | |
- | })
| + | |
- | if ($selectedlink.length>0){
| + | |
- | snapback(0)
| + | |
- | $menu.mouseleave(function(){
| + | |
- | setting.snapbacktimer=setTimeout(function(){
| + | |
- | snapback(setting.fxtime)
| + | |
- | }, setting.snapdelay)
| + | |
- | })
| + | |
- | }
| + | |
- | $(window).bind('resize', function(){
| + | |
- | snapback(setting.fxtime)
| + | |
- | })
| + | |
- | })
| + | |
- | }
| + | |
- | }
| + | |
- | </script>
| + | |
- | | + | |
- | <style>
| + | |
- | hr{
| + | |
- | margin:50px 0;
| + | |
- | color:#eee;
| + | |
- | }
| + | |
- | | + | |
- | ul li.active{ /*IE6 hack- hide gooey effect from that browser*/
| + | |
- | _visibility: hidden; /*IE6 rule*/
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | /* ######### Solid Block Menu CSS ######### */
| + | |
- | | + | |
- | | + | |
- | ul.solidblockmenu{
| + | |
- | margin: 0;
| + | |
- | margin-bottom:1em;
| + | |
- | padding: 0;
| + | |
- | list-style: none;
| + | |
- | position:relative;
| + | |
- | text-align: center; //set value to "left", "center", or "right"*/
| + | |
- | }
| + | |
- | | + | |
- | ul.solidblockmenu li{
| + | |
- | display: inline;
| + | |
- | }
| + | |
- | | + | |
- | ul.solidblockmenu li a{
| + | |
- | font: bold 14px Arial, Verdana, sans-serif;
| + | |
- | color: black;
| + | |
- | padding: 8px;
| + | |
- | margin-right: 20px; /*spacing between each menu link*/
| + | |
- | text-decoration: none;
| + | |
- | }
| + | |
- | | + | |
- | ul.solidblockmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
| + | |
- | position:absolute;
| + | |
- | width:0;
| + | |
- | border:1px solid black;
| + | |
- | -moz-border-radius: 4px;
| + | |
- | -webkit-border-radius: 4px;
| + | |
- | border-radius:4px;
| + | |
- | -moz-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
| + | |
- | -webkit-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
| + | |
- | box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
| + | |
- | background:#d7ed93;
| + | |
- | background: -moz-linear-gradient(top, #d7ed93, #fff);
| + | |
- | background: -webkit-gradient(linear, center top, center bottom, from(#d7ed93), to(#fff));
| + | |
- | background: linear-gradient(top, #d7ed93, #fff);
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | /* ######### Thick Underline Menu CSS ######### */
| + | |
- | | + | |
- | | + | |
- | ul.underlinemenu{
| + | |
- | margin: 0;
| + | |
- | margin-bottom:1em;
| + | |
- | padding: 0;
| + | |
- | list-style: none;
| + | |
- | position:relative;
| + | |
- | text-align: center; //set value to "left", "center", or "right"*/
| + | |
- | }
| + | |
- | | + | |
- | ul.underlinemenu li{
| + | |
- | display: inline;
| + | |
- | }
| + | |
- | | + | |
- | ul.underlinemenu li a{
| + | |
- | font: bold 14px Arial, Verdana, sans-serif;
| + | |
- | color: black;
| + | |
- | padding: 8px;
| + | |
- | margin-right: 20px; /*spacing between each menu link*/
| + | |
- | text-decoration: none;
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | ul.underlinemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
| + | |
- | position:absolute;
| + | |
- | width:0;
| + | |
- | border-bottom:5px solid navy;
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | /* ######### Frame Menu CSS ######### */
| + | |
- | | + | |
- | | + | |
- | ul.framemenu{
| + | |
- | margin: 0;
| + | |
- | margin-bottom:1em;
| + | |
- | padding: 0;
| + | |
- | list-style: none;
| + | |
- | position:relative;
| + | |
- | text-align: center; //set value to "left", "center", or "right"*/
| + | |
- | }
| + | |
- | | + | |
- | ul.framemenu li{
| + | |
- | display: inline;
| + | |
- | }
| + | |
- | | + | |
- | ul.framemenu li a{
| + | |
- | font: bold 14px Arial, Verdana, sans-serif;
| + | |
- | color: black;
| + | |
- | padding: 12px 10px 5px 18px;
| + | |
- | margin-right: 10px; /*spacing between each menu link*/
| + | |
- | text-decoration: none;
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | ul.framemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
| + | |
- | position:absolute;
| + | |
- | width:0;
| + | |
- | border:4px solid orange;
| + | |
- | -moz-box-shadow: 0 0 4px rgba(120,120,120,0.7);
| + | |
- | -webkit-box-shadow: 0 0 4px rgba(120,120,120,0.7);
| + | |
- | box-shadow: 0 0 4px rgba(120,120,120,0.7);
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | | + | |
- | /* Navbar background stuff */
| + | |
- | | + | |
- | #nav {
| + | |
- | width: 100%;
| + | |
- | height: 100%;
| + | |
- | background-color: rgba(0, 0, 0, 0.5);
| + | |
- | }
| + | |
- | | + | |
- | #navcon {
| + | |
- | background-image: url('');
| + | |
- | }
| + | |
- | | + | |
- | #content {
| + | |
- | width:965px;
| + | |
- | }
| + | |
- | </style>
| + | |
- | | + | |
- | | + | |
- |
| + | |
- | | + | |
- | | + | |
- | </head>
| + | |
- | | + | |
- | <body>
| + | |
- | | + | |
- | <div id="navcon">
| + | |
- | | + | |
- | <div id="nav">
| + | |
- | <ul id="gooeymenu1" class="underlinemenu">
| + | |
- | <li><a href="#">home</a></li>
| + | |
- | <li><a href="#">team</a></li>
| + | |
- | <li><a href="#">project</a></li>
| + | |
- | <li><a href="#">contact</a></li>
| + | |
- | </ul>
| + | |
- | | + | |
- | <script>gooeymenu.setup({id:'gooeymenu1', selectitem:1, fx:'swing'})</script>
| + | |
- | | + | |
- | </div><!--/nav-->
| + | |
- | </div><!--/navcon-->
| + | |
- | </body>
| + | |
- | </html>
| + | |