Burger Menü Html-Css

bayramhazar Şubat 11, 2018 Html5 0 3190 105 kelime - 1 dakika64

Bu yazıya puan ver

(No Ratings Yet)

YAZI ÜSTÜ REKLAM ALANI

»Muhteşem Burger Menü (:

Merhaba arkadaşlar. Web de gezinirken sade kullanışlı bir html-css menü tasarımına rastladım. Ne tür örneklerde kullanabileceğiniz konusunda henüz bir fikir sahibi olmasam da oldukça hoşuma gittiği için paylaşma gereği duydum. Bu yüzden sizinle de paylaşmadan geçmek istemedim. Resimlerden de anlaşılacağı üzere DEMO 1 de “Sol” üst köşede bulunan ikona tıkladığınız da DEMO 2 ‘deki gibi bir görünüm alıyor… Umarım sizin de hoşunuza gider… İyi Webler… Kaynak: Victor Freire

Demo 1:

Demo 2:

.HTML KOD

<aside>
  <h1>bayramhazar.com</h1>
  <h1>#1 Burger Menu</h1>
  <h4>inspired by</h4><h3>Google Material Design</h3>
</aside>
<input type="checkbox" id="menu-toggle"/>
  <label id="trigger" for="menu-toggle"></label>
  <label id="burger" for="menu-toggle"></label>
  <ul id="menu">
    <li><a href="#">Ana Sayfa</a></li>
    <li><a href="#">Hakkımda</a></li>
    <li><a href="#">Portföy</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>

<aside>

<h1>bayramhazar.com</h1>

<h1>#1 Burger Menu</h1>

<h4>inspired by</h4><h3>Google Material Design</h3>

</aside>

<li><a href="#">Ana Sayfa</a></li>

<li><a href="#">Hakkımda</a></li>

<li><a href="#">Portföy</a></li>

<li><a href="#">İletişim</a></li>

</ul>

.CSS KOD

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

@keyframes checked-anim {
    50% {
        width: 3000px;
        height: 3000px;
    }
    100% {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}
@keyframes not-checked-anim {
    0% {
        width: 3000px;
        height: 3000px;
    }
}
li, a {
    margin: 75px 0 -55px 0;
    color: #03A9F4;
    font: 14pt "Roboto", sans-serif;
    font-weight: 700;
    line-height: 1.8;
    text-decoration: none;
    text-transform: none;
    list-style: none;
    outline: 0;
    display: none;
}
li {
    width: 230px;
    text-indent: 56px;}
a:focus {
    display: block;
    color: #333;
    background-color: #eee;
    transition: all .5s;
}
aside {
    position: absolute;
    color: white;
    top: 35%;
    right: 10%;
    text-align: right;
}
h1 {
    line-height: 0;
    font-size: 4vw;
    font-weight: 700;
}
h3 {
    float: right;
    line-height: .3;
    font-size: 2.5vw;
    font-weight: lighter;
}
h4 {
    float: left;
    margin-left: -2%;
    font-size: 1.5vw;
    font-weight: lighter;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: #03A9F4;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
}

#trigger, #burger, #burger:before, #burger:after {
    position: absolute;
    top: 25px;
    left: 25px;
    background: #03A9F4;
    width: 30px;
    height: 5px;
    transition: .2s ease;
    cursor: pointer;
    z-index: 1;
}
#trigger {
    height: 25px;
    background: none;
}
#burger:before {
    content: " ";
    top: 10px;
    left: 0;
}
#burger:after {
    content: " ";
    top: 20px;
    left: 0;
}
#menu-toggle:checked + #trigger + #burger {
    top: 35px;
    transform: rotate(180deg);
    transition: transform .2s ease;
}

#menu-toggle:checked + #trigger + #burger:before {
    width: 20px;
    top: -2px;
    left: 18px;
    transform: rotate(45deg) translateX(-5px);
    transition: transform .2s ease;
}
#menu-toggle:checked + #trigger + #burger:after {
    width: 20px;
    top: 2px;
    left: 18px;
    transform: rotate(-45deg) translateX(-5px);
    transition: transform .2s ease;
}
#menu {
    position: absolute;
    margin: 0; padding: 0;
    width: 110px;
    height: 110px;
    background-color: #fff;
    border-bottom-right-radius: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.26);
    animation: not-checked-anim .2s both;
    transition: .2s;
}
#menu-toggle:checked + #trigger + #burger + #menu {
    animation: checked-anim 1s ease both;
}
#menu-toggle:checked + #trigger ~ #menu > li, a {
    display: block;
}
[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    display: none;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

@keyframes checked-anim {

50% {

width: 3000px;

height: 3000px;

}

100% {

width: 100%;

height: 100%;

border-radius: 0;

}

@keyframes not-checked-anim {

0% {

width: 3000px;

height: 3000px;

}

li, a {

margin: 75px 0 -55px 0;

color: #03A9F4;

font: 14pt "Roboto", sans-serif;

font-weight: 700;

line-height: 1.8;

text-decoration: none;

text-transform: none;

list-style: none;

outline: 0;

display: none;

}

li {

width: 230px;

text-indent: 56px;}

a:focus {

display: block;

color: #333;

background-color: #eee;

transition: all .5s;

}

aside {

position: absolute;

color: white;

top: 35%;

right: 10%;

text-align: right;

}

h1 {

line-height: 0;

font-size: 4vw;

font-weight: 700;

}

h3 {

float: right;

line-height: .3;

font-size: 2.5vw;

font-weight: lighter;

}

h4 {

float: left;

margin-left: -2%;

font-size: 1.5vw;

font-weight: lighter;

}

html, body {

margin: 0;

padding: 0;

background-color: #03A9F4;

font-family: 'Roboto', sans-serif;

overflow: hidden;

}

#trigger, #burger, #burger:before, #burger:after {

position: absolute;

top: 25px;

left: 25px;

background: #03A9F4;

width: 30px;

height: 5px;

transition: .2s ease;

cursor: pointer;

z-index: 1;

}

#trigger {

height: 25px;

background: none;

}

#burger:before {

content: " ";

top: 10px;

left: 0;

}

#burger:after {

content: " ";

top: 20px;

left: 0;

}

#menu-toggle:checked + #trigger + #burger {

top: 35px;

transform: rotate(180deg);

transition: transform .2s ease;

}

#menu-toggle:checked + #trigger + #burger:before {

width: 20px;

top: -2px;

left: 18px;

transform: rotate(45deg) translateX(-5px);

transition: transform .2s ease;

}

#menu-toggle:checked + #trigger + #burger:after {

width: 20px;

top: 2px;

left: 18px;

transform: rotate(-45deg) translateX(-5px);

transition: transform .2s ease;

}

#menu {

position: absolute;

margin: 0; padding: 0;

width: 110px;

height: 110px;

background-color: #fff;

border-bottom-right-radius: 100%;

box-shadow: 0 2px 5px rgba(0,0,0,0.26);

animation: not-checked-anim .2s both;

transition: .2s;

}

#menu-toggle:checked + #trigger + #burger + #menu {

animation: checked-anim 1s ease both;

}

#menu-toggle:checked + #trigger ~ #menu > li, a {

display: block;

}

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {

display: none;

}

YAZI ALTI REKLAM ALANI

Yazar Hakkında

Toplam 24 yazı

bayramhazar

Antalya da yaşıyorum. 10 yıldır Web ve Sosyal Medya ile ilgileniyorum, 4 yıldırda düzenli bir spor hayatım var bunlar, Fitness ve Muay Thai. Hayatım boyunca tek bir hedef için uğraştım, Geleceğin Yazılım Mühendislerinden biri olmak için…

Tüm yazılarını gör