HTML/CSS menü tasarımları ücretsiz - R10.net
  • 18-11-2021, 19:58:19
    #1
    HTML/CSS menü tasarımları


    HTML
    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]



    CSS
    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]



    JS
    /* @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]

    Demo / indir
    HTML
    <!-- 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]

    CSS
    * { 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]

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

    Demo / İndir
    HTML
    <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]

    CSS
    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]

    JS
     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)  }

    Demo / İndir
    --------
    R10' daki ilk makalemdir. Makalede hatalar olabilir, Bu kodlar Codepen tarafından sağlanmıştır. R10 da okudugum kadarıyla referans belirtmek sorun degil. Aşşaya sitemin referansını bırakıyorum. Herhangibir uyarı olursa seve seve kaldırırım.
    Referans: https://alkewebtasarim.com/2021/11/18/html-css-menu-tasarimlari/

  • 18-11-2021, 20:00:51
    #2
    Harika gözüküyorlar, kullanım alanı olanlar için faydalı bir çalışma olmuş. Elinize sağlık
  • 18-11-2021, 20:03:50
    #3
    ozenorhan61 adlı üyeden alıntı: mesajı görüntüle
    Harika gözüküyorlar, kullanım alanı olanlar için faydalı bir çalışma olmuş. Elinize sağlık
    Teşekkür ederim.
  • 18-11-2021, 20:11:31
    #4
    Diğer konunuzda mesajınızı okuyup cevaplamıştım da böyle paylaşıma can kurban ilk defa bir paylaşım yapanın sitesine girip destek olmam gerektiğini hissettim. çalışmalar gerçekten size aitse harika
  • 18-11-2021, 20:17:20
    #5
    delikanli53 adlı üyeden alıntı: mesajı görüntüle
    Diğer konunuzda mesajınızı okuyup cevaplamıştım da böyle paylaşıma can kurban ilk defa bir paylaşım yapanın sitesine girip destek olmam gerektiğini hissettim. çalışmalar gerçekten size aitse harika
    Teşekkür ederim. Kodlar codepende free olarak dağıtan arkadaşlardan edindim. Ülkemizde yazılıma hevesli arkadaşlar codepen hakkında pek şey bilmiyorlar bende böyle bir içerik hazırladım.