Halihó babák!:*
Hoztam nektek pár menüstílust ,remélem jók lesznek és tudjátok őket használni!:))Ha viszitek írjatok forrást!:)És kérésre pár png-t !Még majd hozom a többit is de egyenlőre ennyire volt időm!!
saját készítésű |
saját készítésű |
Nathan Sykes png
forrás:google
Daenerys Targaryen gifcsomag
forrás:Tumblr
Menüstílusok:
Első
Menü címe 1 |
Menü címe 2 |
Menü címe 3 |
Menü címe 4 |
HTML kód:
<table border="0" width="198"><tbody><tr><td width="100%"><a class="menulink" href="http://www.fuckinway.gportal.hu">Menü címe 1</a></td></tr><tr><td width="100%"><a class="menulink" href="http://www.fuckinway.gportal.hu">Menü címe 2</a></td></tr><tr><td width="100%"><a class="menulink" href="http://www.fuckinway.gportal.hu">Menü címe 3</a></td></tr><tr><td width="100%"><a class="menulink" href="http://www.fuckinway.gportal.hu">Menü címe 4</a></td></tr></tbody></table>
<style type="text/css">A.menulink {display: block;background-color:#BC8F8F;width: 198px;text-align: center;text-decoration: none;font-family:georgia;font-size:16px;color: #ffffff;BORDER: none;border: solid 0px #FFFFFF;-webkit-border-top-left-radius: 80px;-webkit-border-top-right-radius: 70px;-webkit-border-bottom-left-radius: 40px;-moz-border-radius-topleft: 80px;-moz-border-radius-topright: 70px;-moz-border-radius-bottomleft: 40px;border-top-left-radius: 80px;border-top-right-radius: 70px;border-bottom-left-radius: 40px;-webkit-transition-duration: .50s}A.menulink:hover {font-family:georgia;border: solid 0px #00BFFF;color: #ffffff;background-color:#E9967A;-webkit-border-top-left-radius: 80px;-webkit-border-top-right-radius: 70px;-webkit-border-bottom-left-radius: 40px;-moz-border-radius-topleft: 80px;-moz-border-radius-topright: 70px;-moz-border-radius-bottomleft: 40px;border-top-left-radius: 80px;border-top-right-radius: 70px;border-bottom-left-radius: 40px;-webkit-transition-duration: .50s} </style>
Második
Menü neve Menü neve Menü neve
HTML kód:
<a class="menuelforg" href="URL CÍMED HELYE">Menü neve</a><a class="menuelforg" href="URL CÍMED HELYE">Menü neve</a><a class="menuelforg" href="URL CÍMED HELYE">Menü neve</a>
CSS kód:
<style type="text/css">a.menuelforg{background: url();background:#F5F5F5;color:#c0c0c0;display:inline-block;font-family: georgia;font-size: 15px;font-style: italic;width:173px;padding:10px;margin:1px;text-align:left;text-decoration:none;font-size: 13px;cursor: default;display: block;-webkit-transition-duration: .50s;border-left: 10px solid #FFB6C1;}a.menuelforg:hover {text-indent: 37px;text-decoration:none;background:#F5F5F5;color:#808080;-webkit-transition-duration: .50s;border-left: 10px solid #DB7093;} </style>
Hamradik:
HTML kód:
<div class="ringMenu">
<ul>
<li class="main">
<span style="font-size:14px;"><span style="font-family: georgia,serif;"><strong><a href="http://lidodesign.gportal.hu/">Lidodesign</a></strong></span></span></li>
<li class="top">
<span style="font-size:14px;"><strong><a href="http://lidodesign-css.gportal.hu/" target="_blank">CSS Style</a></strong></span></li>
<li class="right">
<span style="font-size:14px;"><strong><a href="http://sweet-melon.gportal.hu/" target="_blank">GP Designs</a></strong></span></li>
<li class="bottom">
<span style="font-size:14px;"><strong><a href="http://lido.weboldala.net/icons.php/" target="_blank">Icons gallery</a></strong></span></li>
<li class="left">
<span style="font-size:14px;"><strong><a href="http://www.facebook.com/pages/LidoDesign/405596499459937" target="_blank">Facebook</a></strong></span></li>
</ul>
</div>
<style type="text/css">
html, body {
height: 100%;
}
ul , li {
margin: 0;
padding: 0;
}
.ringMenu {
width: 100px;
margin: 150px auto;
}
.ringMenu:hover {}
.ringMenu ul {
list-style: none;
position: relative;
width: 100px;
color: white;
}
.ringMenu ul a {
color: white;
}
.ringMenu ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
background: #ff0099; /* kör színe */
text-align: center;
line-height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.ringMenu ul li a:hover {
background: #cccccc; /* kör színe egérrel */
}
.ringMenu ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenu:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenu ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: -102px;
left: 0;
}
.ringMenu ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -102px;
left: 0;
}
.ringMenu ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenu ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: -102px;
}
--></style>
<ul>
<li class="main">
<span style="font-size:14px;"><span style="font-family: georgia,serif;"><strong><a href="http://lidodesign.gportal.hu/">Lidodesign</a></strong></span></span></li>
<li class="top">
<span style="font-size:14px;"><strong><a href="http://lidodesign-css.gportal.hu/" target="_blank">CSS Style</a></strong></span></li>
<li class="right">
<span style="font-size:14px;"><strong><a href="http://sweet-melon.gportal.hu/" target="_blank">GP Designs</a></strong></span></li>
<li class="bottom">
<span style="font-size:14px;"><strong><a href="http://lido.weboldala.net/icons.php/" target="_blank">Icons gallery</a></strong></span></li>
<li class="left">
<span style="font-size:14px;"><strong><a href="http://www.facebook.com/pages/LidoDesign/405596499459937" target="_blank">Facebook</a></strong></span></li>
</ul>
</div>
<style type="text/css">
html, body {
height: 100%;
}
ul , li {
margin: 0;
padding: 0;
}
.ringMenu {
width: 100px;
margin: 150px auto;
}
.ringMenu:hover {}
.ringMenu ul {
list-style: none;
position: relative;
width: 100px;
color: white;
}
.ringMenu ul a {
color: white;
}
.ringMenu ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
background: #ff0099; /* kör színe */
text-align: center;
line-height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.ringMenu ul li a:hover {
background: #cccccc; /* kör színe egérrel */
}
.ringMenu ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenu:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenu ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: -102px;
left: 0;
}
.ringMenu ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -102px;
left: 0;
}
.ringMenu ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenu ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: -102px;
}
--></style>
FORRÁS!!!: Frank,Lido
Nincsenek megjegyzések:
Megjegyzés küldése