چند منوی همبرگری خوشمزه با CSS

admin
>دسته بندی: آموزشی, انیمیشن, برنامه نویسی, طراحی وب, گرافیک
برچسب ها: انیمیشن, برنامه نویسی, چند, خوشمزه, طراحی وب, گرافیک, منوی, همبرگری
۱۳۹۵/۰۴/۲۲

چند منوی همبرگری خوشمزه با CSS

منو همبرگری در درجه اول باعث ناوبری کشویی که پیوندهایی به صفحات مختلف در سراسر وب سایت است را شامل می شود. منو های کشویی و ناوبری کشویی عالی برای طراحی واکنش گرا هستند، اما آنها می توان با مهارت زیاد و خلاقیت پیاده سازی کرد به طوری که جدید و جذاب برای کاربر باشد. اگر شما هم به دنبال راه های جدیدی برای تحرک بخشیدن و زنده کردن طراحی خود هستید مثلا در بخشی سه خط که نشان دهنده منو همبرگری است بعد از باز شدن منو به شکل X تبدیل شود و از این قبیل طراحی ها با ما همراه باشید در چند منوی همبرگری خوشمزه با CSS تا نمایشگاهی از خلاقیت ها با CSS و ایجاد انیمیشن ها منوی همبرگری خارق العاده را به شما نمایش دهیم.

hamburger menu

منو همبرگری که نمادی متشکل از سه خط افقی موازی ( نمایش داده می شود به صورت ≡ ) دارد که به عنوان یک دکمه در رابط های گرافیکی کاربری استفاده می شود. این منو ها که اغلب در سمت بالایی راست یا سمت بالایی چپ از یک رابط کاربری نمایش داده شود. این منوها را یک “ منوی همبرگری “ به دلیل شباهت آن ها به یک همبرگر می نامند.

از یک منوی همبرگری معمولا در صفحات وب و یا برای ایجاد گزینه ها یا پیوند ها در اپلیکیشن ها استفاده می شود. آیکون این منو را نورم کاکس به عنوان بخشی از رابط کاربری برای زیراکس استار ( Xerox Star ) که یک رایانه شخصی عرضه شده در ۱۹۸۱ ، طراحی کرده بود.

ما در اینجا کد های مربوط به انیمیشن های این منوها را در اختیار شما قرار می دهیم و شما می توانید با استفاده از سایت codepen.io کد ها را وارد کرده و آن ها را اجرا کنید و می توانید در قسمت پایینی این سایت انیمیشن را تماشا کنید.

۱٫ منو همبرگر ( با پنیر )

این همبرگر دلیل نام گذاری این منو را نشان می دهد. شما با کلیک بر روی این همبرگر تمام اجزای این همبرگر نمایش داده می شود.

برای مشاهده این منو اینجا را کلیک کنید.

کد HTML

<body>

<h1>Hamburger Menu <span>(with cheese)</span></h1>

<h2>Click the hamburger to toggle menu</h2>

</g>

</svg>

</li>

<a class=”link” href=”$ ”>Tomatoes</a>

<path d=”M140.3,31.75 C139.15,38.15 119.3,39.95 95.9,35.8 C72.5,31.65 54.5,23.1 55.65,16.7 C55.85,15.65 56.4,12.75 57.6,11.9 C63.4,7.9 80.6,9.15 100.05,12.6 C119.85,16.15 136.75,21.05 140.45,26.9 C141.05,27.95 140.45,30.75 140.3,31.75 L140.3,31.75 Z”

id=”Shape” fill=”#E83F40″ sketch:type=”MSShapeGroup”></path>

<path d=”M117.45,31.8 C112.7,31.9 103.45,26.65 97.8,25.7 C92.1,24.75 81.65,26.7 77.2,25.1 C72.75,23.45 83.55,21.6 82,19.9 C80.5,18.2 64.4,14.15 66.4,13.05 C68.4,11.95 84.3,16.05 89.1,15.95 C93.8,15.85 94.3,11.35 100,12.3 C105.7,13.25 104.75,17.65 109.2,19.3 C113.65,20.95 130.05,22.2 131.55,23.95 C133.05,25.65 116.55,24.25 114.55,25.35 C112.55,26.45 122.15,31.7 117.45,31.8 L117.45,31.8 Z”

id=”Shape” fill=”#E83F40″ sketch:type=”MSShapeGroup”></path>

<path d=”M87.1,22.85 C87.2,29.35 68.05,34.9 44.3,35.3 C20.55,35.65 1.25,30.7 1.15,24.2 C1.15,23.1 1.15,20.15 2.15,19.15 C7.1,14.1 24.2,12.1 44,11.8 C64.15,11.5 81.6,13.1 86.35,18.15 C87.15,19 87.05,21.9 87.1,22.85 L87.1,22.85 Z” id=”Shape” fill=”#E83F40″

sketch:type=”MSShapeGroup”></path>

<path d=”M64.65,27.3 C60,28.3 49.95,24.9 44.2,25.05 C38.45,25.2 28.55,29.1 23.85,28.35 C19.15,27.6 29.4,23.7 27.6,22.35 C25.8,20.95 9.25,20.05 11,18.6 C12.75,17.1 29.15,18.15 33.8,17.15 C38.45,16.15 38.1,11.65 43.85,11.5 C49.6,11.35 49.5,15.85 54.2,16.6 C58.9,17.35 75.2,15.5 77.05,16.9 C78.85,18.3 62.4,20.05 60.65,21.5 C58.85,22.95 69.3,26.3 64.65,27.3 L64.65,27.3 Z”

id=”Shape” fill=”#E83F40″ sketch:type=”MSShapeGroup”></path>

</g>

</svg>

</li>

<a class=”link” href=”$ ”>Lettuce</a>

</g>

</svg>

</li>

<a class=”link” href=”$ ”>Gerkins</a>

<path d=”M45.15,28.95 C41.65,30.6 33.65,30.6 29.1,31.15 C24.55,31.7 16.85,33.55 13.05,32.75 C9.25,31.95 8.8,28.4 7.15,26.55 C5.5,24.7 2.3,21.9 1.45,19.7 C-0.9,13.55 8.95,16.15 12.45,14.5 C16,12.85 21.85,8.25 26.35,7.9 C30.9,7.55 36.4,9.2 40.25,10 C44.05,10.8 54.95,6.5 53.35,13.6 C52.8,16 50.25,19 49.1,21.2 C47.95,23.35 48.65,27.3 45.15,28.95 L45.15,28.95 Z”

id=”Shape” fill=”#۶C844A” sketch:type=”MSShapeGroup”></path>

<path d=”M44.85,25.85 C41.35,27.5 33.35,27.5 28.8,28.05 C24.25,28.6 16.55,30.45 12.75,29.65 C8.95,28.85 8.5,25.3 6.85,23.45 C5.2,21.6 0.35,18.8 1.15,16.6 C2,14.45 8.65,13.05 12.15,11.4 C15.7,9.75 21.55,5.15 26.05,4.8 C30.6,4.45 36.1,6.1 39.95,6.9 C43.75,7.7 51.45,8.65 53.05,10.5 C54.7,12.35 49.95,15.9 48.8,18.1 C47.65,20.2 48.35,24.2 44.85,25.85 L44.85,25.85 Z”

id=”Shape” fill=”#۹EA555″ sketch:type=”MSShapeGroup”></path>

<path d=”M102.3,30.65 C98.45,31.3 90.75,29.2 86.25,28.45 C81.75,27.75 73.8,27.5 70.35,25.7 C66.9,23.9 67.4,20.35 66.35,18.15 C65.25,15.95 62.9,12.35 62.7,10.05 C62.1,3.5 70.85,8.65 74.7,7.95 C78.55,7.3 85.4,4.45 89.9,5.3 C94.35,6.15 99.25,9.25 102.7,11.05 C106.15,12.85 117.8,11.6 114.35,18.05 C113.2,20.25 109.9,22.45 108.2,24.2 C106.5,26 106.1,30 102.3,30.65 L102.3,30.65 Z”

id=”Shape” fill=”#۶C844A” sketch:type=”MSShapeGroup”></path>

<path d=”M102.8,27.6 C98.95,28.25 91.25,26.1 86.75,25.4 C82.25,24.7 74.3,24.45 70.85,22.65 C67.4,20.85 67.9,17.35 66.85,15.1 C65.75,12.9 61.8,8.85 63.2,7 C64.6,5.15 71.35,5.6 75.2,4.9 C79.05,4.25 85.9,1.4 90.4,2.25 C94.85,3.1 99.75,6.2 103.2,8 C106.65,9.8 113.8,12.75 114.85,15 C115.95,17.2 110.4,19.4 108.7,21.15 C107.05,22.9 106.65,26.9 102.8,27.6 L102.8,27.6 Z”

id=”Shape” fill=”#۹EA555″ sketch:type=”MSShapeGroup”></path>

</g>

</svg>

</li>

<a class=”link” href=”$ ”>Cheese</a>

</g>

</svg>

</li>

<a class=”link” href=”$ ”>Bacon</a>

<path d=”M123.9,35.85 C120.35,37.95 101.9,37.9 97.2,37.45 C89.8,36.7 76.25,29.85 68.85,29.1 C59.7,28.15 44.6,29.05 35.45,28.15 C29.35,27.55 11.3,26.3 7.3,22.7 C4.85,20.45 5.3,13.1 8.4,11.65 C13.3,9.35 30.75,14.75 36.7,15.35 C45.95,16.3 60.95,14.75 70.2,15.65 C77.45,16.35 91.5,21.3 98.75,22 C103.65,22.5 120.9,20.2 124.5,22.85 C127.25,24.9 126.8,34.15 123.9,35.85 L123.9,35.85 Z”

id=”Shape” fill=”#۸۹۴۶۴۷″ sketch:type=”MSShapeGroup”></path>

<path d=”M124.25,32.35 C120.7,34.45 102.25,34.4 97.55,33.95 C90.15,33.2 76.55,26.35 69.2,25.6 C60.05,24.7 44.95,25.6 35.8,24.65 C29.7,24.05 11.65,22.8 7.65,19.2 C5.2,17 5.65,9.6 8.75,8.15 C13.65,5.85 31.1,11.25 37.05,11.9 C46.3,12.85 61.3,11.25 70.55,12.2 C77.8,12.9 91.85,17.85 99.1,18.55 C104,19.05 121.25,16.75 124.85,19.4 C127.6,21.45 127.15,30.65 124.25,32.35 L124.25,32.35 Z”

id=”Shape” fill=”#AA7272″ sketch:type=”MSShapeGroup”></path>

<path d=”M124.55,29.55 C121,31.65 102.55,31.65 97.85,31.15 C90.45,30.4 76.9,23.55 69.5,22.8 C60.35,21.9 45.25,22.75 36.1,21.85 C30,21.25 11.95,20 7.95,16.4 C5.5,14.2 5.95,6.8 9.05,5.35 C13.95,3.05 31.4,8.45 37.35,9.05 C46.6,10 61.6,8.4 70.85,9.35 C78.1,10.1 92.15,15 99.4,15.7 C104.3,16.2 121.55,13.9 125.15,16.6 C127.9,18.65 127.4,27.85 124.55,29.55 L124.55,29.55 Z”

id=”Shape” fill=”#۸۹۴۶۴۷″ sketch:type=”MSShapeGroup”></path>

<path d=”M124.8,27.1 C121.3,28.8 102.85,28.5 98.15,28 C90.75,27.25 77.1,21.3 69.7,20.55 C60.55,19.65 45.5,20.1 36.35,19.2 C30.25,18.6 12.2,17.25 8.15,14.2 C5.65,12.3 6,6.15 9.1,4.95 C13.95,3.15 31.5,7.95 37.45,8.55 C46.7,9.5 61.65,8.45 70.9,9.35 C78.15,10.1 92.3,14.45 99.5,15.15 C104.4,15.65 121.6,14 125.2,16.3 C127.95,18 127.65,25.75 124.8,27.1 L124.8,27.1 Z”

id=”Shape” fill=”#AA7272″ sketch:type=”MSShapeGroup”></path>

<path d=”M121.35,22.9 C118.4,25.8 100.55,30.35 95.85,31.05 C88.5,32.15 73.65,28.85 66.3,29.95 C57.2,31.3 42.8,35.9 33.7,37.25 C27.65,38.15 9.85,41.4 5.1,38.9 C2.15,37.35 0.8,30.1 3.45,27.9 C7.65,24.45 25.9,25.4 31.8,24.5 C41,23.15 55.15,17.9 64.3,16.55 C71.5,15.45 86.35,16.75 93.55,15.7 C98.45,14.95 114.6,8.5 118.7,10.2 C121.9,11.5 123.7,20.6 121.35,22.9 L121.35,22.9 Z”

id=”Shape” fill=”#۸۹۴۶۴۷″ sketch:type=”MSShapeGroup”></path>

<path d=”M120.8,19.5 C117.85,22.4 100,26.95 95.3,27.65 C87.95,28.75 73.1,25.45 65.75,26.55 C56.65,27.9 42.25,32.5 33.15,33.85 C27.1,34.75 9.3,38 4.55,35.5 C1.6,33.95 0.25,26.65 2.9,24.5 C7.1,21.1 25.35,22 31.25,21.15 C40.45,19.75 54.6,14.55 63.8,13.15 C71,12.05 85.85,13.35 93.05,12.3 C97.95,11.55 114.1,5.1 118.2,6.8 C121.35,8.05 123.15,17.1 120.8,19.5 L120.8,19.5 Z”

id=”Shape” fill=”#AA7272″ sketch:type=”MSShapeGroup”></path>

<path d=”M120.4,16.65 C117.45,19.55 99.6,24.1 94.9,24.8 C87.55,25.9 72.7,22.6 65.35,23.7 C56.25,25.05 41.85,29.65 32.75,31.05 C26.7,31.95 8.9,35.2 4.15,32.7 C1.2,31.15 -0.15,23.9 2.5,21.75 C6.7,18.35 24.95,19.25 30.85,18.35 C40,16.95 54.2,11.75 63.35,10.4 C70.55,9.3 85.4,10.6 92.6,9.55 C97.5,8.8 113.65,2.35 117.8,4.05 C120.95,5.25 122.75,14.35 120.4,16.65 L120.4,16.65 Z”

id=”Shape” fill=”#۸۹۴۶۴۷″ sketch:type=”MSShapeGroup”></path>

<path d=”M120,14.25 C117,16.8 99.05,21 94.4,21.7 C87.05,22.8 72.35,20.4 65,21.5 C55.9,22.85 41.45,27.05 32.35,28.45 C26.3,29.35 8.45,32.55 3.8,30.55 C0.9,29.3 -0.25,23.25 2.4,21.35 C6.65,18.4 24.85,18.75 30.75,17.85 C39.9,16.45 54.15,11.75 63.35,10.4 C70.55,9.35 85.3,10.05 92.5,8.95 C97.4,8.2 113.65,2.4 117.7,3.7 C120.85,4.65 122.45,12.2 120,14.25 L120,14.25 Z”

id=”Shape” fill=”#AA7272″ sketch:type=”MSShapeGroup”></path>

</g>

</svg>

</li>

<a class=”link” href=”$ ”>Burger</a>

<path d=”M140.25,27.2 C140.45,36.65 132.95,44.4 123.5,44.6 C123.5,44.6 101,48.15 73.2,48.65 C44.75,49.2 20,46.55 20,46.55 C10.55,46.75 2.8,39.25 2.6,29.8 L2.6,29.8 C2.4,20.35 2.65,12.7 12.05,12.55 C12.05,12.55 31.95,18.45 71.2,17.7 C113.65,16.9 130.3,10.35 130.3,10.35 C139.75,10.15 140.1,17.8 140.25,27.2 L140.25,27.2 L140.25,27.2 Z”

id=”Shape” fill=”#۶D4B33″ sketch:type=”MSShapeGroup”></path>

</g>

</svg>

</li>

<a class=”link” href=”$ ”>Bottom Bun</a>

<path d=”M138.9,25.75 C138.9,34.9 134.2,42.3 128.4,42.3 C128.4,42.3 93.35,45.8 72.35,45.8 C48.65,45.8 13.1,42.3 13.1,42.3 C7.3,42.3 2.6,34.9 2.6,25.75 L2.6,25.75 C2.6,16.6 7.3,9.25 13.1,9.25 L128.4,9.25 C134.15,9.2 138.9,16.6 138.9,25.75 L138.9,25.75 L138.9,25.75 Z”

id=”Shape” fill=”#F49B2F” sketch:type=”MSShapeGroup”></path>

</g>

</svg>

</li>

</ul>

</div>

</body>

کد CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);

html {

background: #f2f2f2;

}

body {

font-family: “PT Sans”;

text-align: center;

padding-top: 50px;

color: #4c4c4c;

}

body span {

font-size: .7em;

font-style: italic;

}

h1 {

font-size: 2em;

}

h2 {

margin-top: 20px;

font-size: 1.2em;

color: #b2b2b2;

}

li {

list-style: none;

font-weight: bold;

}

.wrapper {

position: relative;

text-align: center;

display: inline-block;

width: 550px;

height: 300px;

padding-top: 30px;

}

.hamburger {

margin: 0 auto;

height: 400px;

width: 250px;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

cursor: pointer;

text-align: center;

}

.item {

position: relative;

-webkit-transition: 0.3s;

transition: 0.3s;

}

.link {

position: absolute;

left: 20%;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

color: inherit;

text-decoration: none;

font-size: 1.5em;

opacity: 0;

-webkit-transition: 0.3s 0.1s;

transition: 0.3s 0.1s;

z-index: 2;

}

.shadow {

height: 30px;

border-radius: 50%;

width: 170px;

margin: 0 auto;

background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));

background-image: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));

-webkit-transform: translateY(-115px);

transform: translateY(-115px);

-webkit-transition: 0.9s;

transition: 0.9s;

}

.slide-in {

opacity: 1;

left: 50%;

top: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

-webkit-transition: 0.3s;

transition: 0.3s;

}

.fade {

opacity: .2;

-webkit-transition: 0.3s;

transition: 0.3s;

}

.fade-out {

opacity: 0;

-webkit-transition: 0.9s;

transition: 0.9s;

}

.bun_top {

-webkit-transform: translateY(95px);

transform: translateY(95px);

}

.tomato {

-webkit-transform: translateY(75px);

transform: translateY(75px);

}

.lettuce {

-webkit-transform: translateY(45px);

transform: translateY(45px);

}

.pickle {

-webkit-transform: translateY(20px);

transform: translateY(20px);

}

.cheese {

-webkit-transform: translateY(-10px);

transform: translateY(-10px);

}

.bacon {

-webkit-transform: translateY(-40px);

transform: translateY(-40px);

}

.burger {

-webkit-transform: translateY(-75px);

transform: translateY(-75px);

}

.bun_bottom {

-webkit-transform: translateY(-95px);

transform: translateY(-95px);

}

.item.bun_top-explode {

position: relative;

-webkit-transition: 0.25s;

transition: 0.25s;

-webkit-transform: translateY(0);

transform: translateY(0);

}

.item.tomato-explode {

position: relative;

-webkit-transition: 0.25s;

transition: 0.25s;

-webkit-transform: translateY(0);

transform: translateY(0);

}

.item.lettuce-explode {

position: relative;

-webkit-transition: 0.25s;

transition: 0.25s;

-webkit-transform: translateY(0);

transform: translateY(0);

}

.item.pickle-explode {

position: relative;

-webkit-transition: 0.25s;

transition: 0.25s;

-webkit-transform: translateY(0);

transform: translateY(0);

}

.item.cheese-explode {

position: relative;

-webkit-transition: 0.25s;

transition: 0.25s;

-webkit-transform: translateY(0);

transform: translateY(0);

}

.item.bacon-explode {

position: relative;

-webkit-transition: 0.25s;

transition: 0.25s;

-webkit-transform: translateY(0);

transform: translateY(0);

}

.item.burger-explode {

position: relative;

-webkit-transition: 0.25s;

transition: 0.25s;

-webkit-transform: translateY(0);

transform: translateY(0);

}

.item.bun_bottom-explode {

position: relative;

-webkit-transition: 0.25s;

transition: 0.25s;

-webkit-transform: translateY(0);

transform: translateY(0);

}

.bun_top-hover {

-webkit-transform: translateY(85.5px);

transform: translateY(85.5px);

position: relative;

-webkit-transition: 0.15s;

transition: 0.15s;

}

.tomato-hover {

-webkit-transform: translateY(67.5px);

transform: translateY(67.5px);

position: relative;

-webkit-transition: 0.15s;

transition: 0.15s;

}

.lettuce-hover {

-webkit-transform: translateY(40.5px);

transform: translateY(40.5px);

position: relative;

-webkit-transition: 0.15s;

transition: 0.15s;

}

.pickle-hover {

-webkit-transform: translateY(18px);

transform: translateY(18px);

position: relative;

-webkit-transition: 0.15s;

transition: 0.15s;

}

.cheese-hover {

-webkit-transform: translateY(-9px);

transform: translateY(-9px);

position: relative;

-webkit-transition: 0.15s;

transition: 0.15s;

}

.bacon-hover {

-webkit-transform: translateY(-36px);

transform: translateY(-36px);

position: relative;

-webkit-transition: 0.15s;

transition: 0.15s;

}

.burger-hover {

-webkit-transform: translateY(-67.5px);

transform: translateY(-67.5px);

position: relative;

-webkit-transition: 0.15s;

transition: 0.15s;

}

.bun_bottom-hover {

-webkit-transform: translateY(-85.5px);

transform: translateY(-85.5px);

position: relative;

-webkit-transition: 0.15s;

transition: 0.15s;

}

کد JS

var list = $ (‘.item’),

hb = $ (‘.hamburger’),

targets = $ (‘.target’),

links = $ (‘.link’),

open = false;

function build() {

var z = 7;

$ .each(list, function(){

$ (this).css(“z-index”, z);

z–;

$ (this).addClass($ (this).attr(“id”));

})

}

build();

function explode_burger() {

$ .each(list, function(){

var self = this;

var id = $ (this).attr(‘id’);

un_hover_burger();

setTimeout(function(){

console.log($ (self));

$ (self).addClass(id + “-explode”);

}, ۳۰۰);

});

}

function shrink_burger() {

$ .each(list, function(){

var explodeClass = $ (this).attr(“id”) + “-explode”;

$ (this).removeClass(explodeClass);

});

}

function hover_burger() {

$ .each(list, function(){

var id = $ (this).attr(‘id’);

$ (this).addClass(id + “-hover”);

});

}

function un_hover_burger() {

$ .each(list, function(){

var id = $ (this).attr(‘id’);

$ (this).removeClass(id + “-hover”);

});

}

$ (‘a’).click(function(e){

e.preventDefault();

});

$ (hb).click(function(){

if (open === false) {

explode_burger();

open = true;

} else {

$ (this).children(‘.link’).removeClass(‘slide-in’);

$ (this).children(‘svg’).attr(“class”, “”);

shrink_burger();

open = false;

}

});

$ (hb).hover(function(){

if (open === false) {

hover_burger();

$ (‘.shadow’).addClass(‘fade-out’);

}

}, function(){

if (open === false) {

un_hover_burger();

$ (‘.shadow’).removeClass(‘fade-out’);

}

});

$ (list).hover(function(){

if (open === true) {

$ (this).children(‘.link’).addClass(‘slide-in’);

$ (this).children(‘svg’).attr(“class”, “fade”);

}

}, function(){

$ (this).children(‘.link’).removeClass(‘slide-in’);

$ (this).children(‘svg’).attr(“class”, “”);

});

۲٫ منو اتمی

در این منو شما وقتی به روی آیکون منو می روید این آیکون به صورت انیمیشنی تبدیل به یک مدل اتمی می شود.

برای مشاهده این منو اینجا را کلیک کنید.

کد HTML

</button>

<p>hover & hold me down</p>

کد CSS

body {

background: #F26451;

}

img {

width:30px;

position:absolute;

bottom:20px;

right:20px;

}

p {

position: absolute;

top: 50%;

left: 50%;

color: #fff;

text-transform: uppercase;

letter-spacing: 4px;

font-size: 10px;

font-family: “helvetica” sans;

text-align: center;

margin-top: 45px;

margin-left: -85px;

}

button {

position: absolute;

top: 50%;

left: 50%;

width: 30px;

height: 30px;

-webkit-transition: all 300ms cubic-bezier(.61, .01, .42, 1);

transition: all 300ms cubic-bezier(.61, .01, .42, 1);

cursor: pointer;

background: transparent;

border: 0px;

}

div {

height: 0px;

border: 1.5px solid #fff;

width: 22px;

display: block;

position: absolute;

-webkit-transition: all 300ms cubic-bezier(.61, .01, .42, 1);

transition: all 300ms cubic-bezier(.61, .01, .42, 1);

background:#fff;

}

button:hover {

-webkit-transition-delay: 100ms;

transition-delay: 100ms;

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

button:hover div:nth-child(3):before {

width: 2px;

height: 2px;

border-radius: 50%;

background: #F26451;

}

button:hover div {

border: 2px solid #fff;

height: 9px;

border-radius: 50%;

margin-left: -1px;

margin-top: 2px;

-webkit-animation: atom 300ms linear 1;

animation: atom 300ms linear 1;

width: 25px;

top: 0px;

background:transparent;

}

button:focus {

outline: 0px;

}

div:nth-child(1) {

top: 0px;

}

div:nth-child(2) {

top: 8px;

}

div:nth-child(3) {

top: 16px;

}

div:nth-child(3):before {

opacity: 0;

-webkit-animation: ball 1.5s linear infinite;

animation: ball 1.5s linear infinite;

content: ”;

border: 2px solid #fff;

display: block;

position: relative;

top: 0.25px;

}

button:hover div:nth-child(1) {

-webkit-transform: rotate(-33deg);

transform: rotate(-33deg);

}

button:hover div:nth-child(2) {

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

button:hover div:nth-child(3) {

-webkit-transform: rotate(33deg);

transform: rotate(33deg);

}

button:hover div:nth-child(3):before {

opacity: 1;

-webkit-transition: opacity 600ms cubic-bezier(.61, .01, .42, 1);

transition: opacity 600ms cubic-bezier(.61, .01, .42, 1);

;

}

button:active:hover div:nth-child(3):before,

button:active div:nth-child(3):before,

button:active div:nth-child(2) {

opacity: 0;

-webkit-transition: all 200ms;

transition: all 200ms;

}

button:active div {

border: 1.5px solid #fff;

height: 0px;

border-radius: 0%;

margin-left: -1px;

margin-top: 6px;

-webkit-animation: division 300ms linear 1;

animation: division 300ms linear 1;

width: 25px;

top: 0px;

}

button:active div:nth-child(2) {

width: 0px;

}

button:active div:nth-child(3) {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

button:active div:nth-child(1) {

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

}

@-webkit-keyframes atom {

۰% {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

@keyframes atom {

۰% {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

@-webkit-keyframes division {

۰% {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

@keyframes division {

۰% {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

@-webkit-keyframes ball {

۰% {

left: -20%;

top: 10%;

}

۱۰% {

left: 10%;

top: -35%;

}

۲۵% {

left: 45%;

top: -50%;

}

۴۰% {

left: 80%;

top: -20%;

}

۵۰% {

left: 98%;

top: 18%;

}

۶۰% {

left: 80%;

top: 50%;

}

۷۵% {

left: 45%;

top: 80%;

}

۹۰% {

left: 0%;

top: 60%;

}

۱۰۰% {

left: -20%;

top: 10%;

}

@keyframes ball {

۰% {

left: -20%;

top: 10%;

}

۱۰% {

left: 10%;

top: -35%;

}

۲۵% {

left: 45%;

top: -50%;

}

۴۰% {

left: 80%;

top: -20%;

}

۵۰% {

left: 98%;

top: 18%;

}

۶۰% {

left: 80%;

top: 50%;

}

۷۵% {

left: 45%;

top: 80%;

}

۹۰% {

left: 0%;

top: 60%;

}

۱۰۰% {

left: -20%;

top: 10%;

}

۳٫ منویی کاملا با CSS

این هم یک منوی همبرگری زیبا و جزاب با این تفاوت که این منو کاملا با زبان CSS ساخته شده است. در این منو وقتی بر روی آن می رویم به شکل ⤫ در می آید.

برای مشاهده این منو اینجا را کلیک کنید.

کد CSS

/* Variables */

/* Helpers */

meta:nth-of-type(1), style:nth-of-type(1), script:nth-of-type(1) {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

style:nth-of-type(1):before, script:nth-of-type(1):before, script:nth-of-type(1):after {

display: block;

width: 156px;

height: 3px;

border-radius: 3px;

background: #e03a72;

}

html, meta:nth-of-type(1), style:nth-of-type(1):before, script:nth-of-type(1):before, script:nth-of-type(1):after {

-webkit-animation-duration: 2s;

animation-duration: 2s;

-webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.5, 0);

animation-timing-function: cubic-bezier(0.5, 0, 0.5, 0);

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

}

/* Mixins */

/* Main */

@-webkit-keyframes circle {

۰%, ۳۴٫۹۹۹% {

-webkit-clip-path: polygon(0 0);

clip-path: polygon(0 0);

border-color: #e03a72;

}

۵۴٫۹۹۹% {

-webkit-clip-path: polygon(0 0);

clip-path: polygon(0 0);

}

۵۵% {

display: block;

-webkit-clip-path: polygon(125px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px);

clip-path: polygon(125px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px);

}

۵۷٫۵% {

-webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, 125px -125px, 125px -125px, 125px -125px);

clip-path: polygon(125px 125px, 375px 125px, 125px -125px, 125px -125px, 125px -125px, 125px -125px);

}

۶۰% {

-webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, -125px 125px, -125px 125px);

clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, -125px 125px, -125px 125px);

}

۶۲٫۵% {

-webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 125px 375px);

clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 125px 375px);

}

۶۵%, ۱۰۰% {

-webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 375px 125px);

clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 375px 125px);

border-color: #FFF;

}

@keyframes circle {

۰%, ۳۴٫۹۹۹% {

-webkit-clip-path: polygon(0 0);

clip-path: polygon(0 0);

border-color: #e03a72;

}

۵۴٫۹۹۹% {

-webkit-clip-path: polygon(0 0);

clip-path: polygon(0 0);

}

۵۵% {

display: block;

-webkit-clip-path: polygon(125px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px);

clip-path: polygon(125px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px);

}

۵۷٫۵% {

-webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, 125px -125px, 125px -125px, 125px -125px);

clip-path: polygon(125px 125px, 375px 125px, 125px -125px, 125px -125px, 125px -125px, 125px -125px);

}

۶۰% {

-webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, -125px 125px, -125px 125px);

clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, -125px 125px, -125px 125px);

}

۶۲٫۵% {

-webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 125px 375px);

clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 125px 375px);

}

۶۵%, ۱۰۰% {

-webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 375px 125px);

clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 375px 125px);

border-color: #FFF;

}

@-webkit-keyframes line-middle {

۰%, ۳۴٫۹۹۹% {

-webkit-transform: translateX(0);

transform: translateX(0);

background: #e03a72;

}

۴۰٫۵% {

-webkit-transform: translateX(-18.72px);

transform: translateX(-18.72px);

}

۵۵% {

-webkit-transform: translateX(47px);

transform: translateX(47px);

}

۵۷٫۵% {

-webkit-transform: translateX(832.39816px);

transform: translateX(832.39816px);

}

۶۵%, ۱۰۰% {

-webkit-transform: translateX(832.39816px);

transform: translateX(832.39816px);

background: #FFF;

}

@keyframes line-middle {

۰%, ۳۴٫۹۹۹% {

-webkit-transform: translateX(0);

transform: translateX(0);

background: #e03a72;

}

۴۰٫۵% {

-webkit-transform: translateX(-18.72px);

transform: translateX(-18.72px);

}

۵۵% {

-webkit-transform: translateX(47px);

transform: translateX(47px);

}

۵۷٫۵% {

-webkit-transform: translateX(832.39816px);

transform: translateX(832.39816px);

}

۶۵%, ۱۰۰% {

-webkit-transform: translateX(832.39816px);

transform: translateX(832.39816px);

background: #FFF;

}

@-webkit-keyframes line-top {

۰%, ۳۴٫۹۹۹% {

-webkit-transform: translateX(0) translateX(0) translateY(0) rotate(0deg);

transform: translateX(0) translateX(0) translateY(0) rotate(0deg);

background: #e03a72;

}

۴۹٫۵% {

-webkit-transform: translateX(-15.6px) translateY(0) rotate(10deg);

transform: translateX(-15.6px) translateY(0) rotate(10deg);

}

۶۵%, ۱۰۰% {

-webkit-transform: translateX(0) translateY(40px) rotate(-135deg);

transform: translateX(0) translateY(40px) rotate(-135deg);

background: #FFF;

}

@keyframes line-top {

۰%, ۳۴٫۹۹۹% {

-webkit-transform: translateX(0) translateX(0) translateY(0) rotate(0deg);

transform: translateX(0) translateX(0) translateY(0) rotate(0deg);

background: #e03a72;

}

۴۹٫۵% {

-webkit-transform: translateX(-15.6px) translateY(0) rotate(10deg);

transform: translateX(-15.6px) translateY(0) rotate(10deg);

}

۶۵%, ۱۰۰% {

-webkit-transform: translateX(0) translateY(40px) rotate(-135deg);

transform: translateX(0) translateY(40px) rotate(-135deg);

background: #FFF;

}

@-webkit-keyframes line-bottom {

۰%, ۳۴٫۹۹۹% {

-webkit-transform: translateY(0) rotate(0deg);

transform: translateY(0) rotate(0deg);

background: #e03a72;

}

۴۹٫۵% {

-webkit-transform: translateX(-15.6px) translateY(0) rotate(-10deg);

transform: translateX(-15.6px) translateY(0) rotate(-10deg);

}

۶۵%, ۱۰۰% {

-webkit-transform: translateX(0) translateY(-40px) rotate(135deg);

transform: translateX(0) translateY(-40px) rotate(135deg);

background: #FFF;

}

@keyframes line-bottom {

۰%, ۳۴٫۹۹۹% {

-webkit-transform: translateY(0) rotate(0deg);

transform: translateY(0) rotate(0deg);

background: #e03a72;

}

۴۹٫۵% {

-webkit-transform: translateX(-15.6px) translateY(0) rotate(-10deg);

transform: translateX(-15.6px) translateY(0) rotate(-10deg);

}

۶۵%, ۱۰۰% {

-webkit-transform: translateX(0) translateY(-40px) rotate(135deg);

transform: translateX(0) translateY(-40px) rotate(135deg);

background: #FFF;

}

@-webkit-keyframes background {

۰%, ۵۵% {

background: #2c2c2c;

}

۶۵%, ۱۰۰% {

background: #b83170;

}

@keyframes background {

۰%, ۵۵% {

background: #2c2c2c;

}

۶۵%, ۱۰۰% {

background: #b83170;

}

html {

position: relative;

height: 100%;

box-sizing: border-box;

-webkit-animation-name: background;

animation-name: background;

}

*, *:before, *:after {

box-sizing: inherit;

}

head {

display: block;

}

meta:nth-of-type(1) {

display: block;

width: 250px;

height: 250px;

border: 3px solid #e03a72;

border-radius: 100%;

-webkit-animation-name: circle;

animation-name: circle;

}

style:nth-of-type(1) {

display: block;

height: 250px;

width: 250px;

overflow: hidden;

text-indent: -99999px;

}

style:nth-of-type(1):before {

content: “”;

position: absolute;

top: 50%;

left: 50%;

margin-top: -1.5px;

margin-left: -78px;

-webkit-animation-name: line-middle;

animation-name: line-middle;

}

script:nth-of-type(1) {

display: block;

height: 250px;

width: 250px;

text-indent: -99999px;

}

script:nth-of-type(1):before, script:nth-of-type(1):after {

content: “”;

position: absolute;

top: 50%;

left: 50%;

margin-left: -78px;

}

script:nth-of-type(1):before {

margin-top: -41.5px;

-webkit-animation-name: line-top;

animation-name: line-top;

}

script:nth-of-type(1):after {

margin-top: 38.5px;

-webkit-animation-name: line-bottom;

animation-name: line-bottom;

}

@media screen and (min-width: 800px) {

body:after {

content: “Note: Firefox doesn’t support path-clip: polygon(…); It’s recommend to use Chrome instead”;

display: block;

position: absolute;

bottom: 10px;

right: 10px;

color: #FFF;

font-family: Arial;

font-size: 11px;

}

نوشته چند منوی همبرگری خوشمزه با CSS اولین بار در آموزش برنامه نویسی پدیدار شد.

مبنع این خبر (برای مشاهده متن کامل خبر لینک زیر را بزنید):
آموزش برنامه نویسی