Меню на CSS3 с анимация за Blogger

Здравейте, всички! Предлагам да се запознаете с анимираното меню на базата на CSS3. В това меню не се използват скриптове. Всичко се изпълнява само на CSS3. Поддържа се от най-популярните браузъри. В браузъри, които не поддържат CSS3, менюто ще работи, но без ефекти на анимация.

Считам, че не е практично да правим кръпки за по-стари браузъри. Време е да преминем към модерното.

Въведение

Експериментите с CSS3 могат да доведат до забележителни ефекти, които се появяват, когато задържите курсора на мишката върху него. Идеята е проста комбинация от елементи (икони и заглавия), които се анимират и трансформират, когато задържите мишката.
Това меню, базирано на CSS3, работи изцяло в следните браузъри: Opera 11 и по-нови версии, Firefox 4 и по-нови версии, Google Chrome и Internet Explorer 10. Други браузъри също изцяло показват менюто, но няма анимация или ефекти.

➤Менюто се състои от два компонента: оформление на самото меню и CSS3 стилове;

➤Цветовия дизайн на CSS3 менюто може да се зададе и променя чрез стиловете;

➤Оформеното меню може да се постави навсякъде в блога ви;

Ще ви го представя в два различни по визия варианта.

Първи вариант

CSS3 код

<style>

.content-inner {

*background-color: #FFF;

}

.post-body {

font: normal normal 100% sans-serif;

}

.widget .post-body ul,

.widget .post-body li,

.post-body ul,

.post-body li,

.widget ul,

.widget li {padding: 0 ;margin: 0;}

.widget .post-body td {text-align: left; padding: 5px;}

.macmenu {

height: 200px;

}

.button {

text-align: center;

margin: 0 auto;

width: 700px;

}

.button a img,

.button a {

display: block;

float: left;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

height: 70px;

width: 70px;

}

.button a {

margin: 5px 15px;

text-align: center;

color: #666;

font: normal normal 10px Verdana;

text-decoration: none;

word-wrap: normal;

}

.macmenu a:hover img {

margin-left: -30%;

height:128px;

width:128px;

}

.button a:hover {

font: normal bold 14px Verdana;

}

</style>

<div class="macmenu">

<div align="center" class="button">

<a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXLuAUNzozWZqsTc_Zbm7qgizWRViSWqF6nAeuFvA1K60RMuu5gflVtlHDfm07L4uNyw89gYDOped0Up1gWZSoablng5esieemAOs2UZef6SKwDOsu55j00cODRrDI4UU1tsafkHOy6Are/s1600/home+(1).png" />Главна</a>   <a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQiDIZjjzqtd-29L-UL2SoB9zacS84uig5l98t7Me6YRJWo_Ej6PXlowQN0M_NHreT3qo1vdj6cgP8qbNp0Vn476n_SQVzHRp1DPmyG150TxRgZyONekfHXMBWrTYJTDcIG1AxF7nnhD5/s1600/home+(2).png" />Новини</a>   <a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2sOv_pjOwziPqxWVd7cLivM2Rvi7guMHkpsw9Pk5QXWNLE-YsAq1DqfLiG77W7_sA_u0_31hcWsFauucMivfZMJaqvPy-LROjU9QmxjgfgGtQcKTQ3eNaI_GGJymoxLy1tUN_8557QBhS/s1600/home+(3).png" />Фотографии</a>   <a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0j3h8lBDJozyNnfEDVE0XJMwOEkIVWABX3EgzJCnxfAE0eSNyIsP0f-QQHQA8etYGErE9ww7hRPPYhHzy3NEsxsMbYnEEzexpZ6WavVd9fsMA3WODcyBNWR-6G9fZPK8oWjcPeoB54555/s1600/home+(4).png" />Музика</a>   <a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCEbR_wPRQEVKzmNYrSl4PqG2rLTBr55wbKwm-xjOMW7gMaE7902CIL5rEOX51151Ceir0EqJipIp4pwp4EluqN_GJQFxIpCcpLfdV0oeKUclNFQ8uuvZX9h3C4laRIBFOlKdn2HHQkrDx/s1600/home+(5).png" />Документи</a>   <a href="https://draft.blogger.com/blogger.g?blogID=8711634455381466741#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_IPUdnK-z4jMhCciqeE4A62pXRvxxvG0HCDpp-1Y4XZ2vgApyRQijqmmSmZS9BI3s_Cxh54V3jsHsqAodugCLoJhYGoGAduX7DNuxIdaAeo-YkHsz_9aOi9p-lkeaVvQOD6KfbpNaZNZz/s1600/home+(6).png" />Избрано</a> </div>

</div>

Втори вариант

CSS3 код

<style type="text/css">

div#page {

padding-top: 40px;

padding-bottom: 40px;

height: 688px;

background: url(/content/download/1411/6792/file/nature7.jpg) no-repeat center top transparent;

}

#top-menu ul {

margin: 0px;

padding: 0px;

list-style: none;

}

#top-menu > ul > li {

float: left;

}

#top-menu > ul > li > ul {

top: 100%;

left: 0;

}

#top-menu li {

position: relative;

}

#top-menu a {

display: block;

white-space: nowrap;

}

#top-menu ul li li ul {

top: 0;

left: 100%;

}

#top-menu ul ul {

visibility: hidden;

position: absolute;

}

#top-menu li:hover > ul {

visibility: visible;

}

#top-menu {

padding: 0 5px;

}

#top-menu,

#top-menu > ul {

background-color: #9DA4AD;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

#top-menu:after {

content: "";

clear: both;

display: block;

}

#top-menu a {

text-decoration: none;

color: #FFFFFF;

padding: 5px 10px 5px 10px;

line-height: 1.2;

}

#top-menu > ul > li > a {

padding: 5px 10px;

margin: 2px 0;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

#top-menu > ul > li > ul + a {

padding-bottom: 7px;

margin-bottom: 0;

}

#top-menu > ul > li > ul + a:after {

content: " \25bc";

}

#top-menu > ul > li:hover > a {

background-color: #2288BB;

}

#top-menu > ul > li:hover > ul + a {

-webkit-border-radius: 5px 5px 0 0;

-moz-border-radius: 5px 5px 0 0;

border-radius: 5px 5px 0 0;

}

#top-menu > ul > li > ul {

min-width: 100%;

background-color: rgb(70, 114, 179);

background-color: rgba(70, 114, 179, 0.8);

}

#top-menu > ul > li li > ul + a:after {

content: " \25b6";

}

#top-menu > ul > li > ul > li:last-child,

#top-menu > ul > li > ul {

-webkit-border-radius: 0 0 5px 5px;

-moz-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

}

#top-menu ul li li:hover,

#top-menu ul li li ul,

#top-menu ul li li ul li:hover {

background-color: rgb(124, 147, 178);

background-color: rgba(124, 147, 178, 0.8);

}

#top-menu > ul > li > ul,

#top-menu ul li li ul {

-webkit-transition: all 300ms;

-moz-transition: all 300ms;

-o-transition: all 300ms;

transition: all 300ms;

}

#top-menu > ul > li > ul {

top: 400%;

opacity: 0;

}

#top-menu > ul > li:hover > ul {

top: 100%;

opacity: 1;

}

#top-menu ul li ul li ul {

left: 400%;

opacity: 0;

}

#top-menu ul li ul li:hover ul {

left: 100%;

opacity: 1;

}

#top-menu a {

font-size: 22px;

}

</style>

</head>

<body>

<div id="page">

<div id="top-menu">

<ul>

<li>

<ul>

<li><a href="#">Ruby</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li>

<ul>

<li><a href="#">CakePHP</a></li>

<li><a href="#">Symfony</a></li>

<li><a href="#">Zend</a></li>

<li><a href="#">CodeIgniter</a></li>

</ul>

<a href="#">PHP</a>

</li>

<li><a href="#">JavaScript</a></li>

<li><a href="#">C++</a></li>

</ul>

<a href="#">Languages</a>

</li>

<li>

<ul>

<li><a href="#">Chrome</a></li>

<li>

<ul>

<li><a href="#">Mobile</a></li>

<li><a href="#">Desktop</a></li>

</ul>

<a href="#">Opera</a>

</li>

<li><a href="#">IE</a></li>

<li><a href="#">Firefox</a></li>

<li><a href="#">Safari</a></li>

</ul>

<a href="#">Browsers</a>

</li>

<li>

<ul>

<li><a href="#">Windows</a></li>

<li><a href="#">Linux</a></li>

<li><a href="#">FreeBSD</a></li>

<li><a href="#">Mac OS</a></li>

</ul>

<a href="#">Operation systems</a>

</li>

<li><a href="#">Others</a></li>

</ul>

</div>        </div>

Как изглеждат двете менюта? Копирайте кодовете и използвайте този инструмент, за да ги видите.
Допадат ли ви? Продължете, като редактирате кодовете, за да получите меню по ваш вкус. Моля, споделете мнения или предложения.

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за моя блог на :


Здраве за всички вас! Не забравяйте да правите добро на други хора!