Find the source code below to create circular tab menu. And also i given the download button to download the full source code, and also i provided the demo link to check how the circular tab menu is working. I hope this code is very useful.
Code for circle tab menu:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Circle Tab menu using css and javaScript</title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="jquery.js" ></script>
</header>
<body>
<div class ='hidden' id="menu1">
<h1>Forecast</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida justo nec vehicula auctor. Nulla facilisi. Fusce id magna vitae sapien bibendum tristique rutrum id neque. Sed luctus consequat rutrum. Maecenas non mollis tortor, sit amet vestibulum libero.</p>
</div>
<div class ='hidden' id="menu2">
<h1>Automation</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida justo nec vehicula auctor. Nulla facilisi. Fusce id magna vitae sapien bibendum tristique rutrum id neque. Sed luctus consequat rutrum. Maecenas non mollis tortor, sit amet vestibulum libero.</p>
</div>
<div class ='hidden' id="menu3">
<h1>Procurement</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida justo nec vehicula auctor. Nulla facilisi. Fusce id magna vitae sapien bibendum tristique rutrum id neque. Sed luctus consequat rutrum. Maecenas non mollis tortor, sit amet vestibulum libero.</p>
</div>
<div class ='hidden' id="menu4">
<h1>DigiPos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida justo nec vehicula auctor. Nulla facilisi. Fusce id magna vitae sapien bibendum tristique rutrum id neque. Sed luctus consequat rutrum. Maecenas non mollis tortor, sit amet vestibulum libero.</p>
</div>
<div class ='hidden' id="menu5">
<h1>Online Ordering</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida justo nec vehicula auctor. Nulla facilisi. Fusce id magna vitae sapien bibendum tristique rutrum id neque. Sed luctus consequat rutrum. Maecenas non mollis tortor, sit amet vestibulum libero.</p>
</div>
<div class ='hidden' id="menu6">
<h1>Contactless Dine-IN</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida justo nec vehicula auctor. Nulla facilisi. Fusce id magna vitae sapien bibendum tristique rutrum id neque. Sed luctus consequat rutrum. Maecenas non mollis tortor, sit amet vestibulum libero.</p>
</div>
<nav class="menunav">
<ul class='circle'>
<li class='coconut light slice'> <!-- Menu labels -->
<label for='ococonut' class='circle over' id="1">Forecast</label>
</li>
<li class='vanilla light slice'>
<label for='ovanilla' class='circle over' id="2">Automation</label>
</li>
<li class='orange light slice'>
<label for='oorange' class='circle over' id="3">Procurement</label>
</li>
<li class='almond light slice'>
<label for='oalmond' class='circle'><span class="over" id="4">DigiPos</span></label> <!-- Some menu labels have to be flipped with a span -->
</li>
<li class='grape light slice'>
<label for='ogrape' class='circle'><span class="over" id="5">Online Ordering</span></label>
</li>
<li class='blackberry dark slice'>
<label for='oblackberry' class='circle' ><span class="over" id="6">Contactless Dine-IN</span></label>
</li>
<li class='unsel circle'>
<label for='unsel' class="clicky menuname">Our Solutions</label>
</li>
<li class='middle circle'></li>
</ul>
</nav>
<script type="text/javascript" src="javaScript.js"></script>
</body>
</html>
0 Comments