<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="half-circle-menu"> <div class="center-circle"> <div class="categories"><a href="#">Categories</a></div> <a class="little-circle one" href="#link8" data-name="Category name 07"></a> <a class="little-circle two" href="#link7" data-name="Category name 06"></a> <a class="little-circle three" href="#link6" data-name="Category name 05"></a> <a class="little-circle four" href="#link5" data-name="Category name 04"></a> <a class="little-circle five" href="#link4" data-name="Category name 03"></a> <a class="little-circle six" href="#link3" data-name="Category name 02"></a> <a class="little-circle seven" href="#link2" data-name="Category name 01"></a> </div> </div> <script> function setPosition() { // sugar beallitasa/set radius var r = 200; // linkek beallitasa / set anchor elements var links = $('.center-circle').find('.little-circle'); // linkek szamlalasa / count anchor elements var counter = links.length-1; // lepesszog beallitasa / set angle steps var step = 180/counter; // kezdeti szog beallitasa / set starting angle var angle = 0-(180/counter); // radianba konvertalas / convert to radian var rad = angle * (Math.PI / 180); var x = 0; var y = 0; // ciklus futtatasa a linkeken / loop in links $.each(links, function(){ angle += step; rad = angle * (Math.PI / 180); x = Math.round(r * Math.cos(rad)) + 125; y = Math.round(r * Math.sin(rad)); //$(this).css({ left: x + 'px', 'margin-top': -1*y + 'px' }); $(this).animate({ left: x + 'px', 'margin-top': -1*y + 'px' }); }); links.hover(function(e){ e.preventDefault(); var name = $(this).data('name'); console.log(name); var link = $(this).attr('href'); $('.categories a').text(name); $('.categories a').attr('href',link); }); } $(document).ready(function(){ setPosition(); }); </script>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300); * { margin:0; padding: 0; } body { font-family: Arial, sans-serif; font-size: 14px; color: #fff; padding-top: 200px; } a { color: #fff; text-decoration: none; font-size: 26px; background: rgba(255, 255, 255, 0.1); -webkit-transition: background 0.2s, color 0.2s; -moz-transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s; } a:hover { color: #3f7c2d; } .categories { margin: 0 auto; float: left; text-align: center; width: 100%; } .categories a { font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 22px; color: #535353; } .half-circle-menu { background: url('https://res.cloudinary.com/dm5b7b3f5/image/upload/v1431002024/circlemenu/menu_bg.png') center top; width: 500px; height: 300px; margin: 50px auto 0; overflow: hidden; padding-bottom: 2px; } .center-circle { top: 250px; margin: 0 auto; width: 300px; height: 150px; line-height: 50px; text-align: center; /*background: #444;*/ list-style-type: none; position: relative; } .little-circle { background: #5fb446; position: absolute; width: 50px; height: 50px; top: 0; left: 0; border-radius: 50%; } .one, .two, .three, .four, .five, .six, .seven { -webkit-transition: background 0.2s; -moz-transition: background 0.2s; transition: background 0.2s; } .one:hover, .two:hover, .three:hover, .four:hover, .five:hover, .six:hover, .seven:hover { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .one { background: url('https://res.cloudinary.com/dm5b7b3f5/image/upload/v1431002023/circlemenu/icon02.png'); } .two { background: url('https://res.cloudinary.com/dm5b7b3f5/image/upload/v1431002023/circlemenu/icon04.png'); } .three { background: url('https://res.cloudinary.com/dm5b7b3f5/image/upload/v1431002023/circlemenu/icon05.png'); } .four { background: url('https://res.cloudinary.com/dm5b7b3f5/image/upload/v1431002023/circlemenu/icon03.png'); } .five { background: url('https://res.cloudinary.com/dm5b7b3f5/image/upload/v1431002024/circlemenu/icon06.png'); } .six { background: url('https://res.cloudinary.com/dm5b7b3f5/image/upload/v1431002024/circlemenu/icon07.png'); } .seven { background: url('https://res.cloudinary.com/dm5b7b3f5/image/upload/v1431002023/circlemenu/icon01.png'); } .one:hover { background: url('https://res.cloudinary.com/dm5b7b3f5/image/upload/v1431002023/circlemenu/icon02hover.png'); } .two:hover { background: url('https://res.cloudinary.com/dm5b7b3f5/image/upload/v1431002023/circlemenu/icon04hover.png'); } .three:hover { background: url('https://res.cloudinary.com/dm5b7b3f5/image/upload/v1431002023/circlemenu/icon05hover.png'); } .four:hover { background: url('https://res.cloudinary.com/dm5b7b3f5/image/upload/v1431002023/circlemenu/icon03hover.png'); } .five:hover { background: url('https://res.cloudinary.com/dm5b7b3f5/image/upload/v1431002023/circlemenu/icon06hover.png');} .six:hover { background: url('https://res.cloudinary.com/dm5b7b3f5/image/upload/v1431002024/circlemenu/icon07hover.png'); } .seven:hover { background: url('https://res.cloudinary.com/dm5b7b3f5/image/upload/v1431002023/circlemenu/icon01hover.png'); }