Демонстрация горизонтального меню №2

Вернутся назад

  • Home
  • Blog
  • Services
    • Graphic Design
    • Website Design
    • Python Programming
    • PHP Programming
  • Tutorials
    • CSS 12 Available
    • HTML 9 Available
    • Jade3 Available
    • jаvascript21 Available
    • Design37 Available
  • Contact

A simple, clean looking dropdown menu effect achieved using pure CSS. Simple functionality, method can be extended to create a secondary dropdown block with few edits.


HTML:


<div class="container">
  <div class="tutorial">
    <ul>
      <li>Home</li>
      <li>Blog</li>
      <li>Services <i class="fa fa-angle-down"></i>
        <ul>
          <li>Graphic Design</li>
          <li>Website Design </li>
          <li>Python Programming</li>
          <li>PHP Programming</li>
        </ul>
      </li>
      <li>Tutorials <i class="fa fa-angle-down"></i>
        <ul>
          <li>CSS <span>12 Available</span></li>
          <li>HTML <span>9 Available</span></li>
          <li>Jade<span>3 Available</span></li>
          <li>jаvascript<span>21 Available</span></li>
          <li>Design<span>37 Available</span></li>
        </ul>
      </li>
      <li>Contact</li>
    </ul>
    <div class="slider"></div>
    <div class="information">
      <p>A simple, clean looking dropdown menu effect achieved using pure CSS. Simple functionality, method can be extended to create a secondary dropdown block with few edits.</p>
    </div>
  </div>
</div>


CSS:

*:before,
*:after {margin: 0; padding: 0; box-sizing: border-box;}
body, html {height: 100%; background-color: #EEEEEE;}
.container {width: 100%; height: 100%;}
.tutorial {width: 80%; margin: 5% auto 0 auto; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); background-color: #f9f9f9; max-width: 800px;}
.tutorial .slider {width: 100%; height: 300px; background-color: #F03861;}
.tutorial .information {width: 100%; padding: 20px 50px; margin-bottom: 30px; font-family: "Open Sans", sans-serif;}
.tutorial .information h1 {color: #333; font-size: 1.5rem; padding: 0px 10px; border-left: 3px solid #F03861;}
.tutorial .information h3 {color: #e0e0e0; font-size: 1rem; font-weight: 300; padding: 0px 10px; border-left: 3px solid #F03861;}
.tutorial .information p {padding: 10px 0px;}
.tutorial ul {font-size: 0; list-style-type: none;}
.tutorial ul li {font-family: "Open Sans", sans-serif; font-size: 1rem; font-weight: 400; color: #333; display: inline-block; padding: 15px; position: relative;}
.tutorial ul li ul {display: none;}
.tutorial ul li:hover {cursor: pointer; background-color: #f2f2f2;}
.tutorial ul li:hover ul {display: block; margin-top: 15px; width: 200px; left: 0; position: absolute;}
.tutorial ul li:hover ul li {display: block; background-color: #e7e7e7;}
.tutorial ul li:hover ul li span {float: right; color: #f9f9f9; background-color: #F03861; padding: 2px 5px; text-align: center; font-size: .8rem; border-radius: 3px;}
.tutorial ul li:hover ul li:hover {background-color: #e0e0e0;}
.tutorial ul li:hover ul li:hover span {background-color: #ee204e;}