کد منوی لینکدونی زیبا 3 با استفاده از css

لینکستان

حتما طراحی این کد رو بلد نیستید اما من این کد رو برای شما طراحی کردم به صورتی بسیار زیبا همونطور که در دمو می بینید بسیار زیباست.
کد لینکستان را می توانید در هر جایی از قالب قرار دهید.
این کد بر اساس css درست شده است و در ورژن 9 اینترنت اکسپلورر عمل می کند اما نه به زیبایی بقیه مرورگر ها.

<head> <style type="text/css"> .moisrex-link-three{ width: 300px; height: 300px; padding:5px; font-family:Tahoma; font-size:12px; text-align:right; overflow:auto; direction:rtl; box-shadow:0px 0px 10px 0px black inset; -moz-box-shadow:0px 0px 10px 0px black inset; -o-box-shadow:0px 0px 10px 0px black inset; -ms-box-shadow:0px 0px 10px 0px black inset; -webkit-box-shadow:0px 0px 10px 0px black inset; border-radius:5px; background:url(http://up.vatandownload.com/images/j3t95yxyaxiuhcpwxm3x.jpg) left bottom no-repeat black scroll; } .moisrex-link-three a{ color:gray; font-size:12px; text-decoration: none; text-shadow:0px 0px 1px gray; -moz-text-shadow:0px 0px 1px gray; -o-text-shadow:0px 0px 1px gray; -ms-text-shadow:0px 0px 1px gray; -webkit-text-shadow:0px 0px 1px gray; transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; } .moisrex-link-three a:hover{ margin:0 5px 0 0; color:#fff; text-shadow:0px 0px 5px #fff; -moz-text-shadow:0px 0px 5px #fff; -o-text-shadow:0px 0px 5px #fff; -ms-text-shadow:0px 0px 5px #fff; -webkit-text-shadow:0px 0px 5px #fff; } .legend-three{ width:100px; font-family:Tahoma; font-size:13px; color:#fff; font-weight:normal; background-color:black; box-shadow:0px 0px 10px 0px black; -moz-box-shadow:0px 0px 10px 0px black; -o-box-shadow:0px 0px 10px 0px black; -ms-box-shadow:0px 0px 10px 0px black; -webkit-box-shadow:0px 0px 10px 0px black; border-radius:5px 5px 0px 0px; -moz-border-radius:100px 100px 0px 0px; -o-border-radius:100px 100px 0px 0px; -ms-border-radius:100px 100px 0px 0px; -webkit-border-radius:100px 100px 0px 0px; } .moisrex-link-three a:hover:after{content:" (آدرس لینک:"attr(href)")";color:#fff;font-size:9px;font-family:tahoma;)} .ul-three{list-style:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px} .ul-three li{background:url(http://www.famo.ir/wp-content/themes/wtj-famo/images/i/bullet_yellow.png) center right no-repeat;padding:1px 15px 1px 1px;margin:0px 0px 0px 0px;} </style> </head> <body> <center> <div class="legend-three">لینکستان</div> <div class="moisrex-link-three"> <ul class="ul-three"> <li><a href="http://moisrex.rozblog.com/">کدستان</a></li> <li><a href="http://www.google.com/">گوگل</a></li> <li><a href="http://search.yahoo.com/">یاهو</a></li> <li><a href="http://www.msn.com/">ام اس ان</a></li> <li><a href="http://www.bing.com/">بینگ</a></li> <li><a href="http://www.microsoft.com/">مایکروسافت</a></li> <li><a href="http://www.mozilla.org/">فایرفاکس</a></li> <li><a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie/home/">اینترنت اکسپلورر</a></li> <li><a href="https://www.google.com/intl/en/chrome/">گوگل کروم</a></li> <li><a href="http://www.apple.com/safari/">سافاری</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> <li><a href="/">لینک</a></li> </ul> </div> <a href="http://moisrex.rozblog.com/"> </a> </center> </body>

2 نظر

2765 بازدید

جمعه 29 اردیبهشت 1391 - 0:28

میلاد در تاریخ 1396/08/05 ساعت 12:04 می گوید :

سلام ممنونم بابت این کد زیبا و کاربردی خیل بدرد بخوره بازم مرسی

سینا در تاریخ 1391/08/11 ساعت 16:29 می گوید :

ممنون خیلی به دردم خورد.

کلاس های آنلاین فعال

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

آموزش PHP - جلسه اول

پنجشنبه 04 تیر 1394 - 17:00

هیچ کلاس فعالی موجود نیست.

کاربران آنلاین

آمار

مطالب : 792
نظرات : 4504
تعداد اعضا : 37335
افراد آنلاین : 2
بازدید امروز : 110
بازدید دیروز : 922
گوگل امروز : 7
گوگل دیروز : 24
بازدید هفته : 10,009
بازدید ماه : 27,276
بازدید سال : 189,506
بازدید کلی : 14,189,843

عنوان کد:
توضیحات: