Instantly share code, notes, and snippets.
Created
November 26, 2011 22:22
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save rlmcneary2/1396405 to your computer and use it in GitHub Desktop.
Javascript menu with animated pointer and flag
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @CHARSET "ISO-8859-1"; | |
| #menu {color:black;background-color:white;} | |
| #menuBar {position:relative;top:-10px;left:0px;width:100%;height:30px;} | |
| #pointer {position:relative;top:-18px;width:20px;height:20px;margin-left:auto;margin-right:auto;background-color:#8BBAE5;-o-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);} | |
| #menuBarLower {position:relative;top:-10px;left:0px;width:100%;height:10px;background-color:#8BBAE5;} | |
| #selectorOuter {position:relative;top:4px;width:20px;height:20px;margin-left:auto;margin-right:auto;background-color:#8BBAE5;-o-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);} | |
| #selectorInner {position:relative;top:-12px;width:20px;height:20px;margin-left:auto;margin-right:auto;background-color:#FFFFFF;-o-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);} | |
| #selectorBar {position:relative;top:-32px;width:100%;height:2px;background-color:#FFFFFF;} | |
| #menuBarLowerThin {position:relative;width:100%;height:3px;background-color:#8BBAE5;} | |
| #menuBarLowerWhite {position:relative;width:100%;height:2px;background-color:#FFFFFF;} | |
| .menu_item {position:relative;width:100px;height:30px;float:left;background-color:transparent;cursor:pointer;} | |
| .menu_item_text {position:relative;display:block;float:left;margin:0px;width:100px;line-height:30px;text-align:center;vertical-align:middle;cursor:pointer;} | |
| .marker {position:relative;left:0px;top:0px;height:10px;width:100px;overflow:hidden;visibility:hidden;} | |
| .markerSelector{top:-10px;height:10px;visibility:visible;} | |
| .marker_move_right, .marker_move_left {-moz-animation-duration: 150ms;-moz-animation-name: moveRightKeyFrames;-moz-animation-timing-function:ease-in;-webkit-animation-duration: 150ms;-webkit-animation-name: moveRightKeyFrames;-webkit-animation-timing-function:ease-in;animation-duration: 150ms;animation-name: moveRightKeyFrames;animation-timing-function:ease-in;} | |
| .marker_move_left {-moz-animation-name: moveLeftKeyFrames;-webkit-animation-name: moveLeftKeyFrames;animation-name: moveLeftKeyFrames;} | |
| @-moz-keyframes moveRightKeyFrames { 0% {margin-left:0%;} 100% {margin-left:100px;}} | |
| @-moz-keyframes moveLeftKeyFrames { 0% {margin-left: 0%;} 100% {margin-left: -100px;}} | |
| @-webkit-keyframes moveRightKeyFrames { 0% {margin-left:0%;} 100% {margin-left:100px;}} | |
| @-webkit-keyframes moveLeftKeyFrames { 0% {margin-left: 0%;} 100% {margin-left: -100px;}} | |
| @keyframes moveRightKeyFrames { 0% {margin-left:0%;} 100% {margin-left:100px;}} | |
| @keyframes moveLeftKeyFrames { 0% {margin-left: 0%;} 100% {margin-left: -100px;}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="menu.css" /> | |
| </head> | |
| <body> | |
| <div id="menu"> | |
| <div id="pointerMarker" class="marker hidden"> | |
| <div id="pointer"></div> | |
| </div> | |
| <div id="menuBar"> | |
| <div class="menu_item"> | |
| <p class="menu_item_text">Main</p> | |
| </div> | |
| <div class="menu_item"> | |
| <p class="menu_item_text">Search</p> | |
| </div> | |
| <div class="menu_item"> | |
| <p class="menu_item_text">Contact</p> | |
| </div> | |
| </div> | |
| <div id="menuBarLower"> | |
| <div id="menuBarLowerThin"></div> | |
| <div id="menuBarLowerWhite"></div> | |
| <div id="selectedMarker" class="marker markerSelector"> | |
| <div id="selectorOuter"></div> | |
| <div id="selectorInner"></div> | |
| <div id="selectorBar"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> | |
| <script src="menu.js"></script> | |
| <script type="text/javascript"> | |
| var pointerMarker = null; | |
| var selectorMarker = null; | |
| $(document).ready (function () { | |
| pointerMarker = new MenuMarker (); | |
| pointerMarker.setMarker ($("#pointerMarker")[0]); | |
| selectorMarker = new MenuMarker (); | |
| selectorMarker.setMarker ($("#selectedMarker")[0]); | |
| selectorMarker.setAnimateEndedCallback (function (marker) { | |
| //alert ($(marker.getActiveElement ()).children ()[0].innerHTML); | |
| }); | |
| $("#menuBar").mouseleave (function () { | |
| pointerMarker.hide (); | |
| }); | |
| var buttons = $(".menu_item"); | |
| for (var i = 0; i < buttons.length; i++) | |
| { | |
| $(buttons[i]).mouseover (function (evt) { | |
| pointerMarker.show (true, evt.delegateTarget, "marker_move_left", "marker_move_right"); | |
| }); | |
| $(buttons[i]).click (function (evt) { | |
| selectorMarker.show (true, evt.delegateTarget, "marker_move_left", "marker_move_right"); | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function MenuMarker () | |
| { | |
| this.isShown = false; | |
| this.marker = null; | |
| this.animateEndedCallback = null; | |
| this.activeElement = null; | |
| } | |
| MenuMarker.prototype.setMarker = function (marker) | |
| { | |
| this.marker = marker; | |
| this.isShown = "visible" == $(marker).css ("visibility"); | |
| } | |
| MenuMarker.prototype.setAnimateEndedCallback = function (callback) | |
| { | |
| this.animateEndedCallback = callback; | |
| } | |
| MenuMarker.prototype.getActiveElement = function () | |
| { | |
| return this.activeElement; | |
| } | |
| MenuMarker.prototype.isCssAnimationSupported = function (element) | |
| { | |
| if (element.style.animationName) | |
| return true; | |
| var domPrefixes = "Webkit Moz O ms Khtml".split(" "); | |
| for (var i = 0; i < domPrefixes.length; i++) | |
| { | |
| if (element.style[domPrefixes[i] + "AnimationName"] !== undefined) | |
| return true; | |
| } | |
| return false; | |
| } | |
| MenuMarker.prototype.show = function (isAnimated, destElement, moveLeftClassName, moveRightClassName) | |
| { | |
| this.activeElement = destElement; | |
| var destLeftSide = $(destElement).position ().left; | |
| if (this.isShown === true) | |
| { | |
| if (isAnimated) | |
| { | |
| var that = this; | |
| // If CSS animation is available use that. | |
| if (moveLeftClassName && moveRightClassName && this.isCssAnimationSupported (this.marker)) | |
| { | |
| var cssLeft = parseFloat($(this.marker).css ("left")); | |
| var aniClassName = cssLeft <= destLeftSide ? moveRightClassName : moveLeftClassName; | |
| $("body").on("mozAnimationEnd webkitAnimationEnd animationend", "#" + this.marker.id, function (event){ | |
| $(this).css ("left", destLeftSide); | |
| $(this).removeClass (aniClassName); | |
| $("body").off ("mozAnimationEnd webkitAnimationEnd animationend", "#" + this.id); | |
| if (that.animateEndedCallback) | |
| that.animateEndedCallback (that); | |
| return false; | |
| }); | |
| $(this.marker).addClass (aniClassName); | |
| } | |
| else | |
| { | |
| // No CSS animation go ahead and use jQuery. | |
| $(this.marker).animate ({left:destLeftSide}, 150, "swing", function () { | |
| if (that.animateEndedCallback) | |
| that.animateEndedCallback (that); | |
| }); | |
| } | |
| } | |
| else | |
| { | |
| $(this.marker).css ("left", destLeftSide); | |
| if (this.animateEndedCallback) | |
| this.animateEndedCallback (this); | |
| } | |
| } | |
| else | |
| { | |
| $(this.marker).css ("left", destLeftSide); | |
| $(this.marker).css ("visibility","visible"); | |
| this.isShown = true; | |
| } | |
| } | |
| MenuMarker.prototype.hide = function () | |
| { | |
| $(this.marker).css ("visibility","hidden"); | |
| this.isShown = false; | |
| } |
01-02-2012
menu.css - Remove padding from the menu div.
This tests awesome, quite different from the animations in menu control by C# I've experience with a WinForms UI Menu control. I think I've found what I eagerly need here.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
01-02-2012
Menu.js - Determining which CSS animation (which direction to move the pointer) to use was wrong. it was using the element's offsetLeft position instead of the CSS left location. This problem was only seen when the menu was moved away from X's 0 origin in the window.