منو 4 حالته

در این پست از یک لرن شما میتوانید منوی فلت را دریافت کنید . روش فلت که امروزه در طراحی های وب خیلی کاربرد دارد و در میان کاربران دنیای مجازی محبوب است در این منو به کار رفته است

این منو 4 حالته فلت علاوه بر اینکه فلت می‌باشد، رسپانسیو نیز می باشد.منو 4 حالته فلت از 4 جهت است.و در 5 رنگ مختلف وجود دارد. با استفاده از این منو شما می توانید جلوه جدیدی را به سایت یا وبلاگ خود بدهید. از دیگر خصوصیات این منوی فلت می توان به استفاده از فونت هایی که آیکون دارند و در این منو استفاده شده است نام برد.

پیش نمایش

ابتدا کد زیر را قبل از تگ </head> کپی کنید

کد قبل از </head>:

<link href="http://dl.1learn.ir/mohammadj/Web/MenuFlat/css.css" rel="stylesheet" type="text/css">
<script type="text/javascript"src="http://dl.1learn.ir/admin/1learn/1learn.js"></script>
یکی از طرح‌های زیر را انتخاب و در جای مناسب از قالب خود قرار دهید.

طرح از بالا:

<!-- طراح توسط 1 لرن -->
<a href="http://www.1learn.ir" style="display:none">
&#1740;&#1705; &#1604;&#1585;&#1606; &#1605;&#1585;&#1580;&#1593; &#1578;&#1582;&#1582;&#1589;&#1740; &#1608;&#1576;&#1604;&#1575;&#1711; &#1606;&#1608;&#1740;&#1587;&#1575;&#1606;
</a>
<nav class="top">
 <menu>
 <li>
 <a class="c1" href="#" >
 <span>☀</span>
 </a>
 </li>
 <li>
 <a class="c2" href="#" >
 <span>✈</span>
 </a>
 </li>
 <li>
 <a class="c3" href="#" >
 <span>❄</span>
 </a>
 </li>
 <li>
 <a class="c4" href="#" >
 <span>☎</span>
 </a>
 </li>
 <li>
 <a class="c5" href="#" >
 <span>✉</span>
 </a>
 </li>
 </menu>
</nav> 

طرح از چپ:

 

<!-- طراح توسط 1 لرن -->
<a href="http://www.1learn.ir" style="display:none">
&#1740;&#1705; &#1604;&#1585;&#1606; &#1605;&#1585;&#1580;&#1593; &#1578;&#1582;&#1582;&#1589;&#1740; &#1608;&#1576;&#1604;&#1575;&#1711; &#1606;&#1608;&#1740;&#1587;&#1575;&#1606;
</a>
<nav class="left">
 <menu>
 <li>
 <a class="c1" href="#" >
 <span>☀</span>
 </a>
 </li>
 <li>
 <a class="c2" href="#" >
 <span>✈</span>
 </a>
 </li>
 <li>
 <a class="c3" href="#" >
 <span>❄</span>
 </a>
 </li>
 <li>
 <a class="c4" href="#" >
 <span>☎</span>
 </a>
 </li>
 <li>
 <a class="c5" href="#" >
 <span>✉</span>
 </a>
 </li>
 </menu>
</nav> 

طرح از راست:

 

<!-- طراح توسط 1 لرن -->
<a href="http://www.1learn.ir" style="display:none">
&#1740;&#1705; &#1604;&#1585;&#1606; &#1605;&#1585;&#1580;&#1593; &#1578;&#1582;&#1582;&#1589;&#1740; &#1608;&#1576;&#1604;&#1575;&#1711; &#1606;&#1608;&#1740;&#1587;&#1575;&#1606;
</a>
<nav class="right">
 <menu>
 <li>
 <a class="c1" href="#" >
 <span>☀</span>
 </a>
 </li>
 <li>
 <a class="c2" href="#" >
 <span>✈</span>
 </a>
 </li>
 <li>
 <a class="c3" href="#" >
 <span>❄</span>
 </a>
 </li>
 <li>
 <a class="c4" href="#" >
 <span>☎</span>
 </a>
 </li>
 <li>
 <a class="c5" href="#" >
 <span>✉</span>
 </a>
 </li>
 </menu>
</nav> 

طرح از پایین:

 

<!-- طراح توسط 1 لرن -->
<a href="http://www.1learn.ir" style="display:none">
&#1740;&#1705; &#1604;&#1585;&#1606; &#1605;&#1585;&#1580;&#1593; &#1578;&#1582;&#1582;&#1589;&#1740; &#1608;&#1576;&#1604;&#1575;&#1711; &#1606;&#1608;&#1740;&#1587;&#1575;&#1606;
</a>
<nav class="bottom">
 <menu>
 <li>
 <a class="c1" href="#" >
 <span>☀</span>
 </a>
 </li>
 <li>
 <a class="c2" href="#" >
 <span>✈</span>
 </a>
 </li>
 <li>
 <a class="c3" href="#" >
 <span>❄</span>
 </a>
 </li>
 <li>
 <a class="c4" href="#" >
 <span>☎</span>
 </a>
 </li>
 <li>
 <a class="c5" href="#" >
 <span>✉</span>
 </a>
 </li>
 </menu>
</nav> 

فرادرس

برچسب ها : ، ، ، ، ، ، ، ،