موتینِکس

مرجع کد و ابزار و گرافیک

موتینِکس

مرجع کد و ابزار و گرافیک

کد منوی css

چهارشنبه, ۳۱ ارديبهشت ۱۳۹۳، ۰۸:۵۴ ب.ظ

 

کد اول که مربوط به استایل هست رو بهتره تو هدر قالب (قبل از </head>) بزارین:

 

<style>
.nav_motinex_{
	list-style:none;
	direction:rtl;
	font:11px tahoma;
	padding:0;
	margin:10px;
	height:40px;
	border:1px #666 solid;
	background: #7d7e7d;
	background: 
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

	background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
	background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));
	background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
	background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
	background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
	background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
	color:#FFF;
	border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
	-khtml-border-radius:5px;
}
.nav_motinex_ li{
	float:right;
	border-left:1px #666 solid;
}
.nav_motinex_ li:hover{
	background: #6b6b6b;
	background: 
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzZiNmI2YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

	background: -moz-linear-gradient(top, #6b6b6b 1%, #000000 100%);
	background: -webkit-gradient(linear, left top, left bottom, 
color-stop(1%,#6b6b6b), color-stop(100%,#000000));
	background: -webkit-linear-gradient(top, #6b6b6b 1%,#000000 100%);
	background: -o-linear-gradient(top, #6b6b6b 1%,#000000 100%);
	background: -ms-linear-gradient(top, #6b6b6b 1%,#000000 100%);
	background: linear-gradient(to bottom, #6b6b6b 1%,#000000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr='#6b6b6b', endColorstr='#000000',GradientType=0 );
}
.nav_motinex_ a{
	font:11px Tahoma;
	direction:rtl;
	color:#949494;
	display:block;
	text-decoration:none;
	padding:12px;
}
.nav_motinex_ a:hover{
	color:#fff;
}
</style>
<!--[if gte IE 9]>
  <style type="text/css">
    .nav_motinex_,.nav_motinex_ li:hover{
       filter: none;
    }
  </style>
<![endif]-->

 

کد دوم که مربوط به نمایش منو هست رو باید جایی بزارید که می خواین منو نشون داده بشه:

 

<ul class="nav_motinex_">
	<li><a href="link1">پیوند1</a></li>
	<li><a href="link2">پیوند2</a></li>
	<li><a href="link3">پیوند3</a></li>
	<li><a href="link4">پیوند4</a></li>
	<li><a href="link5">پیوند5</a></li>
	<li><a href="link6">پیوند6</a></li>
	<li><a href="link7">پیوند7</a></li>
	<li><a href="link8">پیوند8</a></li>
</ul>

برای تغییر متون فقط کد دوم رو ویرایش کنید و اگه با css آشنایی ندارین؛ کد اول رو دست نزنین
XX: رنگ بندی کار در دمو به هم ریخته؛ این کد رو بزارین تو وبتون تا رنگ بندیشو ببینید
XX: افرادی که نمی تونند کد را به صورت دلخواه ویرایش کنند در بخش نظرات اعلام کنند تا بنده برایشان ویرایش کنم


googlereader googleplus stumbleupon digg cloob twitter facebook

نظرات (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
تجدید کد امنیتی