HTML/CSS menü tasarımları ücretsiz

HTML/CSS Menü Tasarımları

[COLOR=#000000][FONT="Open Sans"]<div class="ct" id="t1"> <div class="ct" id="t2"> <div class="ct" id="t3"> <div class="ct" id="t4"> <div class="ct" id="t5"> <ul id="menu"> <a href="#t1"><li class="icon fa fa-bolt" id="uno"></li></a> <a href="#t2"><li class="icon fa fa-keyboard-o" id="dos"></li></a> <a href="#t3"><li class="icon fa fa-rocket" id="tres"></li></a> <a href="#t4"><li class="icon fa fa-dribbble" id="cuatro"></li></a> <a href="#t5"><li class="icon fa fa-plus-circle" id="cinco"></li></a> </ul> <div class="page" id="p1"> <section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">Like this pen to see the magic!...<br> Just kidding, it won't happen anything but I'll be really happy If you do so.</span></section> </div> <div class="page" id="p2"> <section class="icon fa fa-keyboard-o"><span class="title">Type</span></section> </div> <div class="page" id="p3"> <section class="icon fa fa-rocket"><span class="title">Rocket</span></section> </div> <div class="page" id="p4"> <section class="icon fa fa-dribbble"> <span class="title">Dribbble</span> <p class="hint"> <a href="https://dribbble.com/hrtzt" target="_blank">Im ready to play, <span class="hint line-trough">invite me </span> find me</a> </p> <p class="hint">Already invited by <a href="http://www.dribbble.com/mrpeters" target="_blank">Stan Peters</a></p> </section> </div> <div class="page" id="p5"> <section class="icon fa fa-plus-circle"> <span class="title">More</span> <p class="hint"> <span>You love one page & CSS only stuff? </span><br/> <a href="https://codepen.io/hrtzt/details/pgXMYb/" target="_blank">check this pen "Pure CSS One page vertical navigation"</a> </p> </section> </div> </div> </div> </div> </div> </div>[/FONT][/COLOR]

html, body, .page { width: 100%; height: 100%; margin: 0; padding: 0; transition: all .8s cubic-bezier(0.54, 0.35, 0.29, 0.99); -webkit-transition: all .8s cubic-bezier(0.54, 0.35, 0.29, 0.99); -moz-transition: all .8s cubic-bezier(0.54, 0.35, 0.29, 0.99); -o-transition: all .8s cubic-bezier(0.54, 0.35, 0.29, 0.99); color: #fff; overflow: hidden; }

[COLOR=#000000][FONT="Open Sans"]* { font-family: 'open sans', 'lato', 'helvetica', sans-serif; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].page { position: absolute; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#p1 { left: 0; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#p2, #p3, #p4, #p5 { left: 200%; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#p1 { background: darkslateblue; } #p2 { background: tomato; } #p3 { background: gold; } #p4 { background: deeppink; } #p5 { background: rebeccapurple; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#t2:target #p2, #t3:target #p3, #t4:target #p4, #t5:target #p5 { transform: translateX(-190%); -webkit-transform: translateX(-190%); -moz-transform: translateX(-190%); -o-transform: translateX(-190%); transition-delay: .4s !important; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#t2:target #p1, #t3:target #p1, #t4:target #p1, #t5:target #p1{ background: black; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#t2:target #p1 .icon, #t3:target #p1 .icon, #t4:target #p1 .icon, #t5:target #p1 .icon { -webkit-filter: blur(3px); }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].icon { color: #fff; font-size: 32px; display: block; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]ul .icon:hover { opacity: 0.5; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].page .icon .title { line-height: 2; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#t2:target ul .icon, #t3:target ul .icon, #t4:target ul .icon, #t5:target ul .icon{ transform: scale(.6); -webkit-transform: scale(.6); -moz-transform: scale(.6); -o-transform: scale(.6); transition-delay: .25s; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#t2:target #dos, #t3:target #tres, #t4:target #cuatro, #t4:target #cinco { transform: scale(1.2) !important; -webkit-transform: scale(1.2) !important; -moz-transform: scale(1.2) !important; -o-transform: scale(1.2) !important; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]ul { position: fixed; z-index: 1; top: 0; bottom: 0; left: 0; margin: auto; height: 280px; width: 10%; padding: 0; text-align: center; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#menu .icon { margin: 30px 0; transition: all .5s ease-out !important; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]a { text-decoration: none; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].title, .hint { display: block; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].title { font-size: 38px; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].hint { font-size: 13px; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#p4 .hint { display: inherit !important; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].hint a { color: yellow; transition: all 250ms ease-out; -webkit-transition: all 250ms ease-out; -moz-transition: all 250ms ease-out; -o-transition: all 250ms ease-out; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].hint a:hover { color: #FFF; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].line-trough { text-decoration: line-through; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].page .icon { position: absolute; top: 0; bottom: 0; right: 10%; left: 0; width: 270px; height: 170px; margin: auto; text-align: center; font-size: 80px; line-height: 1.3; transform: translateX(360%); -webkit-transform: translateX(360%); -moz-transform: translateX(360%); -o-transform: translateX(360%); transition: all .5s cubic-bezier(.25, 1, .5, 1.25); -webkit-transition: all .5s cubic-bezier(.25, 1, .5, 1.25); -moz-transition: all .5s cubic-bezier(.25, 1, .5, 1.25); -o-transition: all .5s cubic-bezier(.25, 1, .5, 1.25); }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].page#p1 .icon { height: 220px; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].page#p1 .icon { transform: translateX(10%) !important; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#t2:target .page#p2 .icon, #t3:target .page#p3 .icon, #t4:target .page#p4 .icon, #t5:target .page#p5 .icon { transform: translateX(0) !important; -webkit-transform: translateX(0) !important; -moz-transform: translateX(0) !important; -o-transform: translateX(0) !important; transition-delay: 1s; }[/FONT][/COLOR]

/* @author Alberto Hartzet * *I wouldn't mind if you use this piece of code in your project as long as you give credit with a link to my site. www.albertohartzet.com *

[COLOR=#000000][FONT="Open Sans"]Licence (CC BY-NC-SA 4.0) http://creativecommons.org/licenses/by-nc-sa/4.0/ */[/FONT][/COLOR]

<!-- from this video https://www.youtube.com/watch?v=OVYsPQkOhyc-->

[COLOR=#000000][FONT="Open Sans"]<nav class="navigation-tab"> <div class="navigation-tab-item active"> <span class="navigation-tab__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list" > <line x1="8" y1="6" x2="21" y2="6"></line> <line x1="8" y1="12" x2="21" y2="12"></line> <line x1="8" y1="18" x2="21" y2="18"></line> <line x1="3" y1="6" x2="3" y2="6"></line> <line x1="3" y1="12" x2="3" y2="12"></line> <line x1="3" y1="18" x2="3" y2="18"></line> </svg> </span> <span class="navigation-tab__txt">List</span> </div> <div class="navigation-tab-item"> <span class="navigation-tab__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag" > <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path> <line x1="7" y1="7" x2="7" y2="7"></line> </svg> </span> <span class="navigation-tab__txt">Tags</span> </div> <div class="navigation-tab-item"> <span class="navigation-tab__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-bag" > <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path> <line x1="3" y1="6" x2="21" y2="6"></line> <path d="M16 10a4 4 0 0 1-8 0"></path> </svg> </span> <span class="navigation-tab__txt">Bag</span> </div> <div class="navigation-tab-item"> <span class="navigation-tab__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell" > <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path> <path d="M13.73 21a2 2 0 0 1-3.46 0"></path> </svg> </span> <span class="navigation-tab__txt">Notifications</span> </div> <div class="navigation-tab-overlay"></div> </nav>[/FONT][/COLOR]

* { font-family: "Roboto Condensed", sans-serif; }

[COLOR=#000000][FONT="Open Sans"]html, body { height: 100%; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]body { margin: 0; padding: 0; background-color: #7dbfff; display: flex; align-items: center; justify-content: center; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].navigation-tab { height: 150px; width: 600px; background-color: #fff; box-shadow: 0 50px 30px 0 rgba(#000, 0.175); border-radius: 20px 20px 90px 90px; overflow: hidden; border: 15px solid #fff; display: flex; position: relative; flex-shrink:0; &-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 130px; flex-shrink: 0; cursor: pointer; transition: 0.3s; position: relative; z-index: 2; &.active { width: 210px; .navigation-tab__icon { transform: translate(0px, -10px); } .navigation-tab__txt { opacity: 1; transform: translate(0, 10px); } } } &-overlay { border-radius: 20px; background-color: #e4f2ff; height: 100%; width: 210px; position: absolute; left: 0; top: 0; transition: 0.3s; } &__icon { display: block; color: #4298e7; transition-duration: 0.3s; line-height: 1; transform: translate(0, 11px); } &__txt { display: block; font-weight: 400; font-size: 20px; color: #4298e7; opacity: 0; transition-duration: 0.3s; // transition-delay: 0.1s; transform: translate(0, 20px); user-select: none; } }[/FONT][/COLOR]

$(function() { $(".navigation-tab-item").click(function() { $(".navigation-tab-item").removeClass("active"); $(this).addClass("active"); $(".navigation-tab-overlay").css({ left: $(this).prevAll().length * 130 + "px" }); }); });

<html>

[COLOR=#000000][FONT="Open Sans"]<head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="navbarContainer"> <div id="navbar"> <div id="bubbleWrapper"> <div id="bubble1" class="bubble"><span class="icon"><i class="fas fa-home"></i></span></div> <div id="bubble2" class="bubble"><span class="icon"><i class="fab fa-twitter"></i></span></div> <div id="bubble3" class="bubble"><span class="icon"><i class="fas fa-bell"></i></span></div> <div id="bubble4" class="bubble"><span class="icon"><i class="fas fa-user"></i></span></div> </div> <div id="menuWrapper"> <div id="menu1" class="menuElement" onclick="move('1', '50px', '#ffcc80')"><i class="fas fa-home"></i></div> <div id="menu2" class="menuElement" onclick="move('2', '150px', '#81d4fa')"><i class="fab fa-twitter"></i></div> <div id="menu3" class="menuElement" onclick="move('3', '250px', '#c5e1a5')"><i class="fas fa-bell"></i></div> <div id="menu4" class="menuElement" onclick="move('4', '350px', '#ce93d8')"><i class="fas fa-user"></i></div> </div> </div> <div id="bgWrapper"> <div id="bg"></div> <div id="bgBubble"></div> </div> </div> <svg width="0" height="0" > <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur" id="blurFilter"/> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -15" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> </svg>[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]</body>[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]</html>[/FONT][/COLOR]

body { background: #37474f; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; overflow: hidden; }

[COLOR=#000000][FONT="Open Sans"]#navbarContainer{ width: 400px; min-width: 400px; height: 70vh; background-color: #ffcc80; border-radius: 20px; display: flex; justify-content: flex-end; flex-direction: column; overflow: hidden; position: relative; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#navbar{ width: 100%; height: 60px; background-color: #fff; position: absolute; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#bubbleWrapper{ position: absolute; display: flex; justify-content: space-around; width: 100%; bottom: 25px; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].bubble{ background-color: #fff; width: 50px; height: 50px; bottom: 85px; border-radius: 50%; z-index: 1; transform: translateY(120%); display: flex; justify-content: center; align-items: center; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].icon{ opacity: 0; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#bubble1{ transform: translateY(0%); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); > span{ opacity: 0.7; } }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#bgWrapper{ filter: url(#goo); width: 100%; height: 100px; position: absolute; bottom: 60px; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#bg{ background-color: #ffcc80; width: 120%; height: 100%; margin-left: -10%; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#bgBubble{ position: absolute; background-color: #ffcc80; width: 70px; height: 70px; border-radius: 50%; bottom: -50px; left: 50px; transform: translateX(-50%); }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#menuWrapper{ position: absolute; width: 100%; display: flex; justify-content: space-around; }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].menuElement{ opacity: 0.4; transform: translateY(100%); cursor: pointer; &:hover{ opacity: 0.5; } }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"]#contentWrapper{ position: absolute; top: 50%; width: 100%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; h2{ color: #fff; font-family: sans-serif; font-weight: 400; } }[/FONT][/COLOR]
[COLOR=#000000][FONT="Open Sans"].content{ display: none; opacity: 0; }[/FONT][/COLOR]

 function move(id, position, color) {    var tl = gsap.timeline();    tl.to("#bgBubble", {duration: 0.15, bottom: "-30px", ease: "ease-out"}, 0)      .to("#bubble1", {duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out",}, 0)      .to("#bubble2", {duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out",}, 0)      .to("#bubble3", {duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out",}, 0)      .to("#bubble4", {duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out",}, 0)      .to(".icon", {duration: 0.05, opacity: 0, ease: "ease-out",}, 0)      .to("#bgBubble", {duration: 0.2, left: position, ease: "ease-in-out"}, 0.1)      .to("#bgBubble", {duration: 0.15, bottom: "-50px", ease: "ease-out"}, '-=0.2')      .to(`#bubble${id}`, {duration: 0.15, y: "0%", opacity: 1, boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)', ease: "ease-out"}, '-=0.1')      .to(`#bubble${id}> span`, {duration: 0.15, y: "0%", opacity: 0.7, ease: "ease-out"}, '-=0.1')      .to("#navbarContainer", {duration: 0.3, backgroundColor: color, ease: "ease-in-out"}, 0)      .to("#bg", {duration: 0.3, backgroundColor: color, ease: "ease-in-out"}, 0)      .to("#bgBubble", {duration: 0.3, backgroundColor: color, ease: "ease-in-out"}, 0)  }