yatay menu

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

yatay menu

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

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

  
</head>

<body>

  <div id='kapsayici'>
<ul>
   <li class='aktif'><a href='index.html'><span>Anasayfa</span></a></li>
   <li class='listele'><a href='#'><span>Hakkımda</span></a>
      <ul>
         <li class='listele'><a href='#'><span>1</span></a>
            <ul>
               <li><a href='#'><span>1-1</span></a></li>
               <li class='son'><a href='#'><span>1-2</span></a></li>
            </ul>
         </li>
         <li class='listele'><a href='#'><span>2</span></a>
            <ul>
               <li><a href='#'><span>2-1</span></a></li>
               <li class='son'><a href='#'><span>2-2</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>Galeri</span></a></li>
   <li class='son'><a href='#'><span>iletişim</span></a></li>
</ul>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/AyhanALTINOK/yatay-menu-AaKec */
#kapsayici > ul > li > a {line-height: 48px; }
#kapsayici > ul {*display: inline-block; }
#kapsayici a {background: #333;color: #CBCBCB;padding: 0 20px; }
#kapsayici a {display: block;line-height: 1em;text-decoration: none; }
#kapsayici ul li {float: left;min-height: 1px;vertical-align: middle; }
#kapsayici ul li.listele > a:after {content: '+';margin-left: 5px; }
#kapsayici ul li.hover,#kapsayici ul li:hover {position: relative;z-index: 599;cursor: default; }
#kapsayici ul li.son ul ul {left: auto;right: 99.5%; }
#kapsayici ul li.son ul {left: auto;right: 0; }
#kapsayici ul li:hover > a, #kapsayici ul li.aktif > a {background: #c0110a;color: #FFF; }
#kapsayici ul li:hover > ul {visibility: visible; }
#kapsayici ul ul a {background: #c0110a;color: #FFF;/*border: 1px dashed #850803;*/border-top: 0 none;line-height: 150%;padding: 16px 20px; }
#kapsayici ul ul li {float: none; }
#kapsayici ul ul li {font-weight: normal; }
#kapsayici ul ul li {position: relative; }
#kapsayici ul ul li.listele > a:after {content: '+';position: absolute;top: 50%;right: 15px;margin-top: -8px; }
#kapsayici ul ul li:first-child > a {/*border-top: 1px solid #850803; */}
#kapsayici ul ul li:hover > a {background: #a50b05; }
#kapsayici ul ul li:son-child > a {background-clip: padding-box;}
#kapsayici ul ul li:son-child:hover > a {background-clip: padding-box; }
#kapsayici ul ul ul {border-top: 0 none; }
#kapsayici ul ul ul {top: 0;left: auto;right: -99.5%; }
#kapsayici ul ul {border-top: 4px solid #c0110a;text-transform: none;min-width: 190px; }
#kapsayici ul ul {bottom: 0;left: 0; }
#kapsayici ul ul {margin-top: 0; }
#kapsayici ul ul {visibility: hidden;position: absolute;top: 100%;left: 0;z-index: 598;width: 100%; }
#kapsayici ul {position: relative;z-index: 597; }
#kapsayici ul {text-transform: uppercase; }
#kapsayici ul, #kapsayici li {list-style: none;margin: 0;padding: 0; }
#kapsayici {background: #333;border-bottom: 4px solid #c0110a;font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;font-size: 12px; }
#kapsayici {padding: 0;margin: 0;border: 0; }
#kapsayici:after, #kapsayici ul:after {content: '';display: block;clear: both; }
/* stil */

@import url(https://fonts.googleapis.com/css?family=Oxygen+Mono);
hrml,body{margin:0;padding:0;}

Comments