کد آماده منوی کشویی وبلاگ و سایت

سلام دوستان.

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

این کد رو کاملا خودم نوشتم اما واسه قبلناست.

همش HTML-css و یک خط جاوا هم نداره.

 

ویژگی کد

رنگبندی زیبا

آیکون های زیبا و مناسب

انیمیشن روان

فونت های مناسب

همراه با اسکرول

 

یعنی اگه اسکرول رو حرکت بدید ، توی کل سایت همراهتونه.

 

مشاهده دمو کد

 

 

استایل کد

 

.menu {background: #E0E3E8;width: 40px;height: 35px;border-radius: 50px;color: #2a96be;font-family: B Yekan;font-size: 18px;text-align: center;padding-top: 5px;overflow: hidden;transition: all 0.4s;float: left;}

.menu:hover {width: 150px;}
.menu a:link {text-decoration: none;color: #2a96be;transition: all 0.5s;}
.menu a:hover {text-decoration: none;color: #282828;}

 

اچ تی ام ال کد

افقی

 

<center><div class="menu">
<img src="http://upload7.ir/uploads//b28963f9d64cc9b29d2504b1eef0099504576d7d.png"width="30px"align="left"style="padding-left: 5px;"></img><a href="<-BlogUrl->">صفحه اصلی
</div></center></a>


<center><div class="menu">
<img src="https://cdn1.iconfinder.com/data/icons/anchor/128/mail.png"width="30px"align="left"style="padding-left: 5px;"></img><a href="mailto:<-BlogEmail->">تماس با ما
</div></center></a>


<center><div class="menu">
<img src="https://cdn3.iconfinder.com/data/icons/social-circle/512/social_2-128.png"width="30px"align="right"style="padding-right: 5px;"></img><a href="/rss">عناوین مطالب
</div></center></a>


<center><div class="menu">
<img src="https://cdn2.iconfinder.com/data/icons/free-basic-icon-set-2/300/2-128.png"width="30px"align="right"style="padding-right: 5px;"></img><a href="/profile">پروفایل
</div></center></a>

 

اچ تی ام ال کد

عمودی

 

<center><div class="menu">
<img src="http://upload7.ir/uploads//b28963f9d64cc9b29d2504b1eef0099504576d7d.png"width="30px"align="left"style="padding-left: 5px;"></img><a href="<-BlogUrl->">صفحه اصلی
</div></center></a>

<br></br>

<center><div class="menu">
<img src="https://cdn1.iconfinder.com/data/icons/anchor/128/mail.png"width="30px"align="left"style="padding-left: 5px;"></img><a href="mailto:<-BlogEmail->">تماس با ما
</div></center></a>

<br></br>
<center><div class="menu">
<img src="https://cdn3.iconfinder.com/data/icons/social-circle/512/social_2-128.png"width="30px"align="left"style="padding-left: 5px;"></img><a href="/rss">عناوین مطالب
</div></center></a>

<br></br>
<center><div class="menu">
<img src="https://cdn2.iconfinder.com/data/icons/free-basic-icon-set-2/300/2-128.png"width="30px"align="left"style="padding-left: 5px;"></img><a href="/profile">پروفایل
</div></center></a>

 

حتما ببینید:   آموزش جامع تگ های important و z-index
اشتراک این مطلب در تلگرام.

نظر شما چیه؟