Menu

In this example below you will see how to do a Menu with some HTML / CSS and Javascript

Меню навеянное логотипом Ubuntu

Thumbnail
This awesome code was written by stDragon, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright stDragon ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Menu</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav>
    <div id="main-cercle">
        <div id="center-circle">
            <ul>
                <li class="ch-img-1 ch-item">
                  <div class="ch-info">
                    <h3>Партфолио</h3>
                      <p>мои работы <a href="#">Подробнее</a></p>
                  </div>
                </li>
                <li class="ch-img-2  ch-item">
                  <div class="ch-info">
                     <h3>Расценки</h3>                  
                      <p>Тарифы и цены<a href="#">Подробнее</a></p>
                  </div>
                </li>
                <li class="ch-img-3  ch-item">
                  <div class="ch-info">
                     <h3>Обо мне</h3>                  
                      <p>Личная страница<a href="#">Подробнее</a></p>
                  </div>
                </li>
            </ul>                
        </div>                    
    </div>
</nav>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/stDragon/menu-aArzs */
*{
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
body{
  background: #333;
}
nav{    
    margin: 60px auto;
    padding: 0;
    display: block;
    text-align: center;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: relative;
    list-style: none;
    cursor: default;
}
#main-cercle{
    margin: auto;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    background: #686;
    box-shadow:
        inset 0 0 0 60px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}
#center-circle{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    z-index: 2;
}
li{
    padding: 0;
    display: block;
    text-align: center;
    width: 35%;
    height: 35%;
    border-radius: 50%;
    position: absolute;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    list-style: none;
    cursor: default; 
    
    box-shadow:
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;  
    z-index: 3;
}
.ch-item:before {
    content: '';
    display: table;
}
.ch-img-1{
  margin: 0% -10%;
  background: #090;
}
.ch-img-2{
  margin: 35% 65%;
  background: #093;
}
.ch-img-3{
  margin: 70% -10%;
  background: #060;
}
#main-cercle:hover{
  background: #151;
  box-shadow:
        inset 0 0 0 40px rgba(255,255,255,0.5),
        0 1px 2px rgba(0,0,0,0.1);
}
.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 70px;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}
.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.2em;
    margin: 0 20px;
    padding: 10% 0 0 0;
    height: 40%;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
    color: #fff;
    padding: 0px 0px;
    font-style: italic;
    margin: 0 30%;
    font-size: 0.6em;
    border-top: 1px solid rgba(255,255,255,0.5);
    opacity: 0;
    transition: all 1s ease-in-out 0.4s;
}
.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.6em;
    letter-spacing: 1px;
    padding-top: 5px;
    font-family: 'Open Sans', Arial, sans-serif;
}
 
.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}
.ch-item:hover {
    width: 70%;
    border-radius: 100px;
    box-shadow:
        inset 0 0 0 6px rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
    transform: scale(1);
    opacity: 1;
}
.ch-item:hover .ch-info p {
    opacity: 1;
}

Comments