"menu"
Bootstrap 3.0.0 Snippet by evarevirus

<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 ----------> <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,800' rel='stylesheet' type='text/css'> <nav class="menu"> <ul> <li><a href="#products">Products</a></li> <li><a href="#services">Services</a></li> <li><a href="#careers">Careers</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <h1 class="hint">Pure CSS Circular Menu</h1> <p class="hint">Hover to show menu!</p>
body { font-family: Alegreya Sans; background: #feeded; } .menu { position: relative; background: #cd3e3d; width: 3em; height: 3em; border-radius: 5em; margin: auto; margin-top: 5em; margin-bottom: 5em; cursor: pointer; border: 1em solid #fdaead; } .menu:after { content: ""; position: absolute; top: 1em; left: 1em; width: 1em; height: 0.2em; border-top: 0.6em double #fff; border-bottom: 0.2em solid #fff; } .menu ul { list-style: none; padding: 0; } .menu li { width: 5em; height: 1.4em; padding: 0.2em; margin-top: 0.2em; text-align: center; border-top-right-radius: 0.5em; border-bottom-right-radius: 0.5em; transition: all 1s; background: #fdaead; opacity: 0; z-index: -1; } .menu:hover li { opacity: 1; } /** * Add a pseudo element to cover the space * between the links. This is so the menu * does not lose :hover focus and disappear */ .menu:hover ul::before { position: absolute; content: ""; width: 0; height: 0; display: block; left: 50%; top: -5.0em; /** * The pseudo-element is a semi-circle * created with CSS. Top, bottom, and right * borders are 6.5em (left being 0), and then * a border-radius is added to the two corners * on the right. */ border-width: 6.5em; border-radius: 0 7.5em 7.5em 0; border-left: 0; border-style: solid; /** * Have to have a border color for the border * to be hoverable. I'm using a very light one * so that it looks invisible. */ border-color: rgba(0,0,0,0.01); /** * Put the psuedo-element behind the links * (So they can be clicked on) */ z-index: -1; /** * Make the cursor default so it looks like * nothing is there */ cursor: default; } .menu a { color: white; text-decoration: none; /** * This is to vertically center the text on the * little tab-like things that the text is on. */ line-height: 1.5em; } .menu a { color: white; text-decoration: none; } .menu ul { transform: rotate(180deg) translateY(-2em); transition: 1s all; } .menu:hover ul { transform: rotate(0deg) translateY(-1em); } .menu li:hover { background: #cd3e3d; z-index: 10; } .menu li:nth-of-type(1) { transform: rotate(-90deg); position: absolute; left: -1.2em; top: -4.2em; } .menu li:nth-of-type(2) { transform: rotate(-45deg); position: absolute; left: 2em; top: -3em; } .menu li:nth-of-type(3) { position: absolute; left: 3.4em; top: 0.3em; } .menu li:nth-of-type(4) { transform: rotate(45deg); position: absolute; left: 2em; top: 3.7em; } .menu li:nth-of-type(5) { transform: rotate(90deg); position: absolute; left: -1.2em; top: 5em; } .hint { text-align: center; }

Related: See More


Questions / Comments: