Half-radial menu

Developer

Size

4,113 Kb

Views

24,288

Half-radial menu Previews
Half-radial menu HTML Codes
Half-radial menu CSS Codes
Half-radial menu JS Codes

How do I make an half-radial menu?

Experiment to show what a half-radial contextual menu might work.. What is a half-radial menu? How do you make a half-radial menu? This script and codes were developed by Rob on 15 August 2022, Monday.

Half-radial menu Previews

Half-radial menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>half-radial menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Open+Sans|Maven+Pro:500' rel='stylesheet' type='text/css'>
<div class="deco topdeco"> <span></span> <span></span> <span></span> <span></span> </div> <h1>The Half-Radial Menu</h1> <h3> fitt's law and the limitations of the radial menu </h3> <section class="info">
<p> Click anywhere to bring up the half-radial menu.
</p>
<p> Try clicking in different areas to see how it adapts to where your cursor is positioned.
</p> </section> <p class="cta"> Read more at <br /> <a id="link" href="http://www.robsawyer.me/blog/2012/12/12/the-half-radial-menu/">robsawyer.me/blog</a>
</p>
<div id="topleft"></div>
<div id="topcenter"></div>
<div id="topright"></div>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
<div id="bottomleft"></div>
<div id="bottomcenter"></div>
<div id="bottomright"></div>
<div class="twrap leftmenu" id="leftmenu" style="display:none;"> <div class="triangle"> <span>1</span> </div> <div class="triangle"> <span>2</span> </div> <div class="triangle"> <span>3</span> </div> <div class="triangle"> <span>4</span> </div>
</div>
<div class="twrap rightmenu" id="rightmenu" style="display:none;"> <div class="triangle"> <span>1</span> </div> <div class="triangle"> <span>2</span> </div> <div class="triangle"> <span>3</span> </div> <div class="triangle"> <span>4</span> </div>
</div>
<div class="twrap bottommenu" id="bottommenu" style="display:none;"> <div class="triangle"> <span>1</span> </div> <div class="triangle"> <span>2</span> </div> <div class="triangle"> <span>3</span> </div> <div class="triangle"> <span>4</span> </div>
</div>
<div class="twrap topmenu" id="topmenu" style="display:none;"> <div class="triangle"> <span>1</span> </div> <div class="triangle"> <span>2</span> </div> <div class="triangle"> <span>3</span> </div> <div class="triangle"> <span>4</span> </div>
</div>
<div class="twrap topleft" id="topleftmenu" style="display:none;"> <div class="triangle"> <span>1</span> </div> <div class="triangle"> <span>2</span> </div> <div class="triangle"> <span>3</span> </div> <div class="triangle"> <span>4</span> </div>
</div>
<div class="twrap topright" id="toprightmenu" style="display:none;"> <div class="triangle"> <span>1</span> </div> <div class="triangle"> <span>2</span> </div> <div class="triangle"> <span>3</span> </div> <div class="triangle"> <span>4</span> </div>
</div>
<div class="twrap bottomleft" id="bottomleftmenu" style="display:none;"> <div class="triangle"> <span>1</span> </div> <div class="triangle"> <span>2</span> </div> <div class="triangle"> <span>3</span> </div> <div class="triangle"> <span>4</span> </div>
</div>
<div class="twrap bottomright" id="bottomrightmenu" style="display:none;"> <div class="triangle"> <span>1</span> </div> <div class="triangle"> <span>2</span> </div> <div class="triangle"> <span>3</span> </div> <div class="triangle"> <span>4</span> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Half-radial menu - Script Codes CSS Codes

body { background-color:#fff; font-family:'Open Sans', sans-serif; margin:0; padding:0;
}
a {color:#00BDE8;}
h1 { font-size:2.6em; margin:0; padding-top:1.5em; text-align:center; font-family: 'Maven Pro', sans-serif;
}
h3 { margin:0 0 2em; text-align:center;
font-weight:normal;
font-family: georgia, times;
font-style:italic; color:#777; font-size:1em;
}
.info { float:left; width:60%; margin:2em 20%; padding:2em 0; background:#f9f9f9; border-left:5px solid #003842; padding:10px 20px;
}
p { text-align:left; font-size:1em;
}
.cta { float:left; width:100%; text-align:center; color:#999; font-family:georgia, times; font-style:italic; margin:2em 0;
}
.cta a { font-size:1.5em; font-style:normal; font-family: 'Maven Pro', sans-serif; text-decoration:none; line-height:1.5em;
}
/* dark blue 003842 */
.topdeco { float:left; width:100%; height:10px;
}
.topdeco span { float:left; width:25%; height:100%;
}
.deco span:nth-child(1) { background:#FF8220;
}
.deco span:nth-child(2) { background:#000;
}
.deco span:nth-child(3) { background:#FFA00A;
}
.deco span:nth-child(4) { background:#00BDE8;
}
/*
non-design elements
*/
#topleft { position:fixed; top:0; left:0; width:100px; height:100px;
}
#topcenter { position:fixed; top:0; left:100px; right:100px; height:100px;
}
#topright { position:fixed; top:0; right:0; width:100px; height:100px;
}
#left { position:fixed; top:100px; bottom:100px; left:0; width:100px;
}
#center { position:fixed; top:100px; left:100px; right:100px; bottom:100px;
}
#right { position:fixed; top:100px; bottom:100px; right:0; width:100px;
}
#bottomleft { position:fixed; bottom:0; left:0; width:100px; height:100px;
}
#bottomcenter { position:fixed; bottom:0; left:100px; right:100px; height:100px;
}
#bottomright { position:fixed; bottom:0; right:0; width:100px; height:100px;
}
.twrap { position:absolute; width:100px; height:100px; -webkit-transform: scale(1.1);
}
.twrap .triangle { cursor:pointer; position:absolute;	height: 0; width: 10px;	border-left: 12px solid transparent;	border-right: 12px solid transparent;	border-bottom: 30px solid #00BDE8; border-radius:0 0 50% 50%; -webkit-transform: scale(1.1);
}
.leftmenu .triangle:nth-child(1) { top:0; left:33.5%; transform:rotate(160deg);
-ms-transform:rotate(160deg);
-moz-transform:rotate(160deg);
-webkit-transform:rotate(160deg);
-o-transform:rotate(160deg);
}
.leftmenu .triangle:nth-child(1) span { color:#fff; display:block; margin:4px 1px 0 0; transform:rotate(-160deg);
-ms-transform:rotate(-160deg);
-moz-transform:rotate(-160deg);
-webkit-transform:rotate(-160deg);
-o-transform:rotate(-160deg);
}
.leftmenu .triangle:nth-child(2) { top:15%; left:18%; transform:rotate(115deg);
-ms-transform:rotate(115deg);
-moz-transform:rotate(115deg);
-webkit-transform:rotate(115deg);
-o-transform:rotate(115deg);
}
.leftmenu .triangle:nth-child(2) span { color:#fff; display:block; margin:6px 1px 0 0; transform:rotate(-115deg);
-ms-transform:rotate(-115deg);
-moz-transform:rotate(-115deg);
-webkit-transform:rotate(-115deg);
-o-transform:rotate(-115deg);
}
.leftmenu .triangle:nth-child(3) { top:37%; left:18%; transform:rotate(70deg);
-ms-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);
-o-transform:rotate(70deg);
}
.leftmenu .triangle:nth-child(3) span { color:#fff; display:block; margin:6px 0 0 0; transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-webkit-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
}
.leftmenu .triangle:nth-child(4) { top:53%; left:33%; transform:rotate(25deg);
-ms-transform:rotate(25deg);
-moz-transform:rotate(25deg);
-webkit-transform:rotate(25deg);
-o-transform:rotate(25deg);
}
.leftmenu .triangle:nth-child(4) span { color:#fff; display:block; margin:6px 2px 0 0; transform:rotate(-25deg);
-ms-transform:rotate(-25deg);
-moz-transform:rotate(-25deg);
-webkit-transform:rotate(-25deg);
-o-transform:rotate(-25deg);
}
/* righthand menu
.rightmenu {top:50px;left:200px;}*/
.rightmenu .triangle:nth-child(1) { top:0; right:33.9%; transform:rotate(-160deg);
-ms-transform:rotate(-160deg);
-moz-transform:rotate(-160deg);
-webkit-transform:rotate(-160deg);
-o-transform:rotate(-160deg);
}
.rightmenu .triangle:nth-child(1) span { color:#fff; display:block; margin:4px 1px 0 0; transform:rotate(160deg);
-ms-transform:rotate(160deg);
-moz-transform:rotate(160deg);
-webkit-transform:rotate(160deg);
-o-transform:rotate(160deg);
}
.rightmenu .triangle:nth-child(2) { top:15%; right:18%; transform:rotate(-115deg);
-ms-transform:rotate(-115deg);
-moz-transform:rotate(-115deg);
-webkit-transform:rotate(-115deg);
-o-transform:rotate(-115deg);
}
.rightmenu .triangle:nth-child(2) span { color:#fff; display:block; margin:6px 1px 0 0; transform:rotate(115deg);
-ms-transform:rotate(115deg);
-moz-transform:rotate(115deg);
-webkit-transform:rotate(115deg);
-o-transform:rotate(115deg);
}
.rightmenu .triangle:nth-child(3) { top:37%; right:18%; transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-webkit-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
}
.rightmenu .triangle:nth-child(3) span { color:#fff; display:block; margin:6px 0 0 0; transform:rotate(70deg);
-ms-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);
-o-transform:rotate(70deg);
}
.rightmenu .triangle:nth-child(4) { top:53%; right:33%; transform:rotate(-25deg);
-ms-transform:rotate(-25deg);
-moz-transform:rotate(-25deg);
-webkit-transform:rotate(-25deg);
-o-transform:rotate(-25deg);
}
.rightmenu .triangle:nth-child(4) span { color:#fff; display:block; margin:6px 2px 0 0; transform:rotate(25deg);
-ms-transform:rotate(25deg);
-moz-transform:rotate(25deg);
-webkit-transform:rotate(25deg);
-o-transform:rotate(25deg);
}
/* bottom menu
.bottommenu {top:120px;left:25px;}*/
.bottommenu .triangle:nth-child(1) { left:0; bottom:33.9%; transform:rotate(70deg);
-ms-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);
-o-transform:rotate(70deg);
}
.bottommenu .triangle:nth-child(1) span { color:#fff; display:block; margin:4px 1px 0 0; transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-webkit-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
}
.bottommenu .triangle:nth-child(2) { left:15%; bottom:18%; transform:rotate(25deg);
-ms-transform:rotate(25deg);
-moz-transform:rotate(25deg);
-webkit-transform:rotate(25deg);
-o-transform:rotate(25deg);
}
.bottommenu .triangle:nth-child(2) span { color:#fff; display:block; margin:6px 1px 0 0; transform:rotate(-25deg);
-ms-transform:rotate(-25deg);
-moz-transform:rotate(-25deg);
-webkit-transform:rotate(-25deg);
-o-transform:rotate(-25deg);
}
.bottommenu .triangle:nth-child(3) { left:37%; bottom:18%; transform:rotate(-25deg);
-ms-transform:rotate(-25deg);
-moz-transform:rotate(-25deg);
-webkit-transform:rotate(-25deg);
-o-transform:rotate(-25deg);
}
.bottommenu .triangle:nth-child(3) span { color:#fff; display:block; margin:6px 0 0 0; transform:rotate(1525deg9deg);
-ms-transform:rotate(25deg);
-moz-transform:rotate(25deg);
-webkit-transform:rotate(25deg);
-o-transform:rotate(25deg);
}
.bottommenu .triangle:nth-child(4) { left:53%; bottom:33%; transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-webkit-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
}
.bottommenu .triangle:nth-child(4) span { color:#fff; display:block; margin:6px 2px 0 0; transform:rotate(70deg);
-ms-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);
-o-transform:rotate(70deg);
}
/* top menu
.topmenu {top:120px;left:125px;}*/
.topmenu .triangle:nth-child(1) { left:0; top:33.9%; transform:rotate(115deg);
-ms-transform:rotate(115deg);
-moz-transform:rotate(115deg);
-webkit-transform:rotate(115deg);
-o-transform:rotate(115deg);
}
.topmenu .triangle:nth-child(1) span { color:#fff; display:block; margin:4px 1px 0 0; transform:rotate(-115deg);
-ms-transform:rotate(-115deg);
-moz-transform:rotate(-115deg);
-webkit-transform:rotate(-115deg);
-o-transform:rotate(-115deg);
}
.topmenu .triangle:nth-child(2) { left:15%; top:18%; transform:rotate(160deg);
-ms-transform:rotate(160deg);
-moz-transform:rotate(160deg);
-webkit-transform:rotate(160deg);
-o-transform:rotate(160deg);
}
.topmenu .triangle:nth-child(2) span { color:#fff; display:block; margin:6px 1px 0 0; transform:rotate(-160deg);
-ms-transform:rotate(-160deg);
-moz-transform:rotate(-160deg);
-webkit-transform:rotate(-160deg);
-o-transform:rotate(-160deg);
}
.topmenu .triangle:nth-child(3) { left:37%; top:18%; transform:rotate(-160deg);
-ms-transform:rotate(-160deg);
-moz-transform:rotate(-160deg);
-webkit-transform:rotate(-160deg);
-o-transform:rotate(-160deg);
}
.topmenu .triangle:nth-child(3) span { color:#fff; display:block; margin:6px 0 0 0; transform:rotate(160deg);
-ms-transform:rotate(160deg);
-moz-transform:rotate(160deg);
-webkit-transform:rotate(160deg);
-o-transform:rotate(160deg);
}
.topmenu .triangle:nth-child(4) { left:53%; top:33%; transform:rotate(-115deg);
-ms-transform:rotate(-115deg);
-moz-transform:rotate(-115deg);
-webkit-transform:rotate(-115deg);
-o-transform:rotate(-115deg);
}
.topmenu .triangle:nth-child(4) span { color:#fff; display:block; margin:6px 2px 0 0; transform:rotate(115deg);
-ms-transform:rotate(115deg);
-moz-transform:rotate(115deg);
-webkit-transform:rotate(115deg);
-o-transform:rotate(115deg);
}
/* top left menu
.topleft {top:120px;left:325px;}*/
.topleft .triangle:nth-child(1) { top:0; right:18%; transform:rotate(-115deg);
-ms-transform:rotate(-115deg);
-moz-transform:rotate(-115deg);
-webkit-transform:rotate(-115deg);
-o-transform:rotate(-115deg);
}
.topleft .triangle:nth-child(1) span { color:#fff; display:block; margin:4px 1px 0 0; transform:rotate(115deg);
-ms-transform:rotate(115deg);
-moz-transform:rotate(115deg);
-webkit-transform:rotate(115deg);
-o-transform:rotate(115deg);
}
.topleft .triangle:nth-child(2) { top:22%; right:18%; transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-webkit-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
}
.topleft .triangle:nth-child(2) span { color:#fff; display:block; margin:6px 1px 0 0; transform:rotate(70deg);
-ms-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);
-o-transform:rotate(70deg);
}
.topleft .triangle:nth-child(3) { top:37%; right:33%; transform:rotate(-25deg);
-ms-transform:rotate(-25deg);
-moz-transform:rotate(-25deg);
-webkit-transform:rotate(-25deg);
-o-transform:rotate(-25deg);
}
.topleft .triangle:nth-child(3) span { color:#fff; display:block; margin:6px 0 0 0; transform:rotate(25deg);
-ms-transform:rotate(25deg);
-moz-transform:rotate(25deg);
-webkit-transform:rotate(25deg);
-o-transform:rotate(25deg);
}
.topleft .triangle:nth-child(4) { top:37.5%; right:54.5%; transform:rotate(20deg);
-ms-transform:rotate(20deg);
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
}
.topleft .triangle:nth-child(4) span { color:#fff; display:block; margin:6px 2px 0 0; transform:rotate(-20deg);
-ms-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
}
/* top right menu
.topright {top:120px;left:425px;}*/
.topright .triangle:nth-child(1) { top:0; left:18%; transform:rotate(115deg);
-ms-transform:rotate(115deg);
-moz-transform:rotate(115deg);
-webkit-transform:rotate(115deg);
-o-transform:rotate(115deg);
}
.topright .triangle:nth-child(1) span { color:#fff; display:block; margin:4px 1px 0 0; transform:rotate(-115deg);
-ms-transform:rotate(-115deg);
-moz-transform:rotate(-115deg);
-webkit-transform:rotate(-115deg);
-o-transform:rotate(-115deg);
}
.topright .triangle:nth-child(2) { top:22%; left:18%; transform:rotate(70deg);
-ms-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);
-o-transform:rotate(70deg);
}
.topright .triangle:nth-child(2) span { color:#fff; display:block; margin:6px 1px 0 0; transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-webkit-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
}
.topright .triangle:nth-child(3) { top:37%; left:33%; transform:rotate(25deg);
-ms-transform:rotate(25deg);
-moz-transform:rotate(25deg);
-webkit-transform:rotate(25deg);
-o-transform:rotate(25deg);
}
.topright .triangle:nth-child(3) span { color:#fff; display:block; margin:6px 0 0 0; transform:rotate(-25deg);
-ms-transform:rotate(-25deg);
-moz-transform:rotate(-25deg);
-webkit-transform:rotate(-25deg);
-o-transform:rotate(-25deg);
}
.topright .triangle:nth-child(4) { top:37.5%; left:54.5%; transform:rotate(-20deg);
-ms-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
}
.topright .triangle:nth-child(4) span { color:#fff; display:block; margin:6px 2px 0 0; transform:rotate(20deg);
-ms-transform:rotate(20deg);
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
}
/* bottom left menu
.bottomleft {top:50px;left:325px;}*/
.bottomleft .triangle:nth-child(1) { top:0; left:17%; transform:rotate(160deg);
-ms-transform:rotate(160deg);
-moz-transform:rotate(160deg);
-webkit-transform:rotate(160deg);
-o-transform:rotate(160deg);
}
.bottomleft .triangle:nth-child(1) span { color:#fff; display:block; margin:4px 1px 0 0; transform:rotate(-160deg);
-ms-transform:rotate(-160deg);
-moz-transform:rotate(-160deg);
-webkit-transform:rotate(-160deg);
-o-transform:rotate(-160deg);
}
.bottomleft .triangle:nth-child(2) { top:0; left:39%; transform:rotate(-157deg);
-ms-transform:rotate(-157deg);
-moz-transform:rotate(-157deg);
-webkit-transform:rotate(-157deg);
-o-transform:rotate(-157deg);
}
.bottomleft .triangle:nth-child(2) span { color:#fff; display:block; margin:6px 1px 0 0; transform:rotate(157deg);
-ms-transform:rotate(157deg);
-moz-transform:rotate(157deg);
-webkit-transform:rotate(157deg);
-o-transform:rotate(157deg);
}
.bottomleft .triangle:nth-child(3) { left:55%; top:15%; transform:rotate(-115deg);
-ms-transform:rotate(-115deg);
-moz-transform:rotate(-115deg);
-webkit-transform:rotate(-115deg);
-o-transform:rotate(-115deg);
}
.bottomleft .triangle:nth-child(3) span { color:#fff; display:block; margin:6px 0 0 0; transform:rotate(115deg);
-ms-transform:rotate(115deg);
-moz-transform:rotate(115deg);
-webkit-transform:rotate(115deg);
-o-transform:rotate(115deg);
}
.bottomleft .triangle:nth-child(4) { top:37%; left:57%; transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-webkit-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
}
.bottomleft .triangle:nth-child(4) span { color:#fff; display:block; margin:6px 2px 0 0; transform:rotate(70deg);
-ms-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);
-o-transform:rotate(70deg);
}
/* bottom right menu
.bottomright {top:50px;left:425px;}*/
.bottomright .triangle:nth-child(1) { top:0; right:17%; transform:rotate(-160deg);
-ms-transform:rotate(-160deg);
-moz-transform:rotate(-160deg);
-webkit-transform:rotate(-160deg);
-o-transform:rotate(-160deg);
}
.bottomright .triangle:nth-child(1) span { color:#fff; display:block; margin:4px 1px 0 0; transform:rotate(160deg);
-ms-transform:rotate(160deg);
-moz-transform:rotate(160deg);
-webkit-transform:rotate(160deg);
-o-transform:rotate(160deg);
}
.bottomright .triangle:nth-child(2) { top:0; right:39%; transform:rotate(157deg);
-ms-transform:rotate(157deg);
-moz-transform:rotate(157deg);
-webkit-transform:rotate(157deg);
-o-transform:rotate(157deg);
}
.bottomright .triangle:nth-child(2) span { color:#fff; display:block; margin:6px 1px 0 0; transform:rotate(-157deg);
-ms-transform:rotate(-157deg);
-moz-transform:rotate(-157deg);
-webkit-transform:rotate(-157deg);
-o-transform:rotate(-157deg);
}
.bottomright .triangle:nth-child(3) { right:55%; top:15%; transform:rotate(115deg);
-ms-transform:rotate(115deg);
-moz-transform:rotate(115deg);
-webkit-transform:rotate(115deg);
-o-transform:rotate(115deg);
}
.bottomright .triangle:nth-child(3) span { color:#fff; display:block; margin:6px 0 0 0; transform:rotate(-115deg);
-ms-transform:rotate(-115deg);
-moz-transform:rotate(-115deg);
-webkit-transform:rotate(-115deg);
-o-transform:rotate(-115deg);
}
.bottomright .triangle:nth-child(4) { top:37%; right:57%; transform:rotate(70deg);
-ms-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);
-o-transform:rotate(70deg);
}
.bottomright .triangle:nth-child(4) span { color:#fff; display:block; margin:6px 2px 0 0; transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-webkit-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
}
#link {position:relative;z-index:10000;}
.twrap .triangle:hover {border-bottom:30px solid #003842;}

Half-radial menu - Script Codes JS Codes

//$("body").click(function (e) { //var x = e.pageX; //var y = e.pageY;
//$(".twrap").toggle();
//$(".twrap").offset({left: x - 60,top: e.pageY - 40});
//});
$("#topleft").click(function (e) { var x = e.pageX; var y = e.pageY;
$(".topleft").toggle(); $(".bottommenu").hide(); $(".topright").hide(); $(".leftmenu").hide(); $(".rightmenu").hide(); $(".bottomright").hide(); $(".bottomleft").hide(); $(".topmenu").hide();
$(".topleft").offset({left: x - 44,top: e.pageY - 25});
});
$("#topcenter").click(function (e) { var x = e.pageX; var y = e.pageY;
$(".bottommenu").toggle(); $(".topleft").hide(); $(".topright").hide(); $(".leftmenu").hide(); $(".rightmenu").hide(); $(".bottomright").hide(); $(".bottomleft").hide(); $(".topmenu").hide();
$(".bottommenu").offset({left: x - 45,top: e.pageY - 40});
});
$("#topright").click(function (e) { var x = e.pageX; var y = e.pageY;
$(".topright").toggle(); $(".topleft").hide(); $(".bottommenu").hide(); $(".leftmenu").hide(); $(".rightmenu").hide(); $(".bottomright").hide(); $(".bottomleft").hide(); $(".topmenu").hide();
$(".topright").offset({left: x - 60,top: e.pageY - 26});
});
$("#left").click(function (e) { var x = e.pageX; var y = e.pageY;
$(".rightmenu").toggle(); $(".topleft").hide(); $(".topright").hide(); $(".leftmenu").hide(); $(".bottommenu").hide(); $(".bottomright").hide(); $(".bottomleft").hide(); $(".topmenu").hide();
$(".rightmenu").offset({left: x - 40,top: e.pageY - 40});
});
$("#center").click(function (e) { var x = e.pageX; var y = e.pageY;
$(".leftmenu").toggle(); $(".topleft").hide(); $(".topright").hide(); $(".bottommenu").hide(); $(".rightmenu").hide(); $(".bottomright").hide(); $(".bottomleft").hide(); $(".topmenu").hide();
$(".leftmenu").offset({left: x - 60,top: e.pageY - 40});
});
$("#right").click(function (e) { var x = e.pageX; var y = e.pageY;
$(".leftmenu").toggle(); $(".topleft").hide(); $(".topright").hide(); $(".bottommenu").hide(); $(".rightmenu").hide(); $(".bottomright").hide(); $(".bottomleft").hide(); $(".topmenu").hide();
$(".leftmenu").offset({left: x - 60,top: e.pageY - 40});
});
$("#bottomleft").click(function (e) { var x = e.pageX; var y = e.pageY;
$(".bottomleft").toggle(); $(".topleft").hide(); $(".topright").hide(); $(".leftmenu").hide(); $(".rightmenu").hide(); $(".bottomright").hide(); $(".bottommenu").hide(); $(".topmenu").hide();
$(".bottomleft").offset({left: x - 40,top: e.pageY - 40});
});
$("#bottomcenter").click(function (e) { var x = e.pageX; var y = e.pageY;
$(".topmenu").toggle(); $(".topleft").hide(); $(".topright").hide(); $(".leftmenu").hide(); $(".rightmenu").hide(); $(".bottomright").hide(); $(".bottomleft").hide(); $(".bottommenu").hide();
$(".topmenu").offset({left: x - 40,top: e.pageY - 60});
});
$("#bottomright").click(function (e) { var x = e.pageX; var y = e.pageY;
$(".bottomright").toggle(); $(".topleft").hide(); $(".topright").hide(); $(".leftmenu").hide(); $(".rightmenu").hide(); $(".bottommenu").hide(); $(".bottomleft").hide(); $(".topmenu").hide();
$(".bottomright").offset({left: x - 60,top: e.pageY - 40});
});

Home Page	Home
Developer	Rob
Username	robooneus
Uploaded	August 15, 2022
Rating	3.5
Size	4,113 Kb
Views	24,288

Do you need developer help for Half-radial menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rob (robooneus) Script Codes

Name	Size
Flip Button	3,297 Kb
Restaurant Item	10,105 Kb
A Pen by Rob	1,810 Kb
Scroll Arrow - delayed opacity change	4,495 Kb
Scroll Arrow - keep hidden	4,898 Kb
Berlin Restaurants	11,765 Kb
Mini-search filter	4,862 Kb
Useless RPG	4,673 Kb
Simple Page with Side Menu	5,720 Kb
Cards	7,078 Kb

Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Wip elementary os navbar	Nickcolley	2,993 Kb
Border image	JohnRiordan	2,120 Kb
Button fills	Zubfatal	5,205 Kb
Underlined form fields	Mitchdot	2,323 Kb
Blog Concept 2	JGallardo	2,994 Kb
Highbrow Basic HTML Lesson 7	Kimlarocca	1,662 Kb
Parallax scrolling scene	Iharosi	2,485 Kb
WRENCH - STAFF	Lolita-adams	1,608 Kb
Learning FlexBox	Alex_rodrigues	2,821 Kb
Beautiful canvas stars	Matths	2,399 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!