• توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.

آموزش ساخت منوی برگی با Css

ahmadfononi

معاونت انجمن
در این مطلب قصد داریم آموزش ساخت یک منوی زیبا که به شکل برگ می باشد را با استفاده از زبان Css به شما آموزش دهیم.


برای اینکار از کد زیر استفاده نمایید :



کد:
nav {
width: 960px;
height: 100px;
margin: 120px auto;
text-align: center;
}
.top-menu li {
display: inline-block;
text-align: center;
margin: 30px 5px;
position: relative;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.top-menu li:hover {
margin: 30px 20px;
}
.top-menu li:active {
margin: 30px 33px;
}
.top-menu li a  {
width: 100px;
height: 100px;
z-index: 9999;
position: absolute;
top: 35px;
font-weight: bold;
display: block;
text-decoration: none;
font-size: 20px;
color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL]
text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}
.top-menu li:active a {
font-size: 26px;
top: 30px;
text-shadow: none;
}
.top-menu li div.menu-item {
width: 100px;
height: 100px;
display: block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomright: 100px;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{
-webkit-border-top-left-radius: 80px;
-webkit-border-bottom-right-radius: 80px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-bottomright: 80px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-bottomright: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
 
}
#home { background: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=41D05F]#41D05F[/URL] }
#cataloge { background: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=E42B2B]#E42B2B[/URL] }
#price { background: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=ff8400]#ff8400[/URL] }
#about { background: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=a800ff]#a800ff[/URL] }
#contact { background: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=49a7f3]#49a7f3[/URL] }


و همچنین برای فراخوانی کد بالا از کد Html زیر استفاده نمایید :

کد:
<nav>
<ul>
<li><a href=#>Home</a><div id="home"></div></li>
<li><a href=#>Mobile</a><div id="cataloge"></div></li>
<li><a href=#>Google</a><div id="price"></div></li>
<li><a href=#>About</a><div id="about"></div></li>
<li><a href=#>Contact</a><div id="contact"></div></li>
</ul>
</nav>




مشاهده نمونه
 

tarenoco

New member
برای تغییر تو شکل این منو ها مثلا بجای شکل پیش فرض از مربع یا هر چیزه دیگه بخوام استفاده کنم کجاهاش باید این تغییرات رو وارد کنم
 
بالا