تابلو اعلانات

erfannn

سلام به همه اساتید رزبلاگی

من چند وقتی هست دارم CSS می اموزم و امروز اومدم یه \"منو باز شو\" با استفاده از فیلم های اموزشی و سایتای اموزشی ساختم...

لطفا ببینید کارمو و نظر خودتون رو با توجه به اینکه این اولین کار منه بگید..

برای دیدن پیش نمایش کـــلـــیـــک کنید.

کـــــــــــــــــد :

کد:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head><meta charset=utf-8/><title>منو باز شو</title><style type="text/css">     .menu{	background:gray;	width:1000px;	margin:auto;	color:red;	font:11px B Homa;	font-weight:normal;	direction:rtl;	}	.menu li{	display:inline-block;	padding:10px 5px;	margin:0px;	transition:0.5s;    }    .menu li:hover{    background:#51BDBD;	}	

    .menu li ul{    position:absolute;    margin:0px;    padding:0px;    visibility:hidden;    opacity:0;    background:#51BDBD;    transition:0.5s;    top:50px;    }        .menu li:hover > ul{    visibility:visible;    opacity:1;    }.menu li ul li{	display:block;	padding:10px 5px;	margin:0px;    }	.menu a{	color:white;	text-decoration:none;    }</style>

</head>

<body>

<div class="menu">       <li><a href="#">صفحه نخست</a></li>       <li><a href="#">انجمن</a></li>       <li><a href="#">ثبت نام</a></li>       <li><a href="#">ورود کاربران</a></li>      <li><a href="#">تست4 </a></li>            <li><a href="#">هاور یک*</a>        <ul>            <li><a href="#">متن هاور یک</a></li>            <li><a href="#">متن هاور دو</a></li>            <li><a href="#">متن هاور 3</a></li>        </ul>      </li>                 <li><a href="#">هاور دو*</a>        <ul>            <li><a href="#">متن هاور یک</a></li>            <li><a href="#">متن هاور 2</a></li>            <li><a href="#">متن هاور سه</a></li>        </ul>      </li><div/>

<body/><html/>

20-abzar

با سلام

برای اولین بار اینکه کدنویسی کردی تبریک میگم و قشنگ بود
خب باید یکم سلیقه به خرج بدی که در رنگ بندی کمی ضعیف هستی

و این کد هارو دقیق از روی فیلم که میگفت نوشتی؟؟ یکم بیشتر کار کن و با سلیقه خودت سی اس اس هارو بنویس مثل فیلم و دقیق مثل اون خوب نیس و میشه گفت چیزی نمیتونی یاد بگیری

موفق باشید/

koolak91

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

zntboys

خوبـــــبود

poorya

خیلی خوب بود
فقط همونطور که دوستان گفتن، جزییات کار مثل رنگبندی رو بهتر کنی دیگه عالی میشه

amirziv24

good

artadis

nice!

a1382

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

zntboys

چیه همه به رنگ بند کردین کار گرافیکی که نیست کده کد خخخخ

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

کد:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> 

<head>

<meta charset=utf-8/><title>منو باز شو</title>

<style type="text/css">

.menu {

	background: rgba(154,92,255,1);

background: -moz-radial-gradient(center, ellipse cover, rgba(154,92,255,1) 0%, rgba(92,1,239,1) 100%);

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(154,92,255,1)), color-stop(100%, rgba(92,1,239,1)));

background: -webkit-radial-gradient(center, ellipse cover, rgba(154,92,255,1) 0%, rgba(92,1,239,1) 100%);

background: -o-radial-gradient(center, ellipse cover, rgba(154,92,255,1) 0%, rgba(92,1,239,1) 100%);

background: -ms-radial-gradient(center, ellipse cover, rgba(154,92,255,1) 0%, rgba(92,1,239,1) 100%);

background: radial-gradient(ellipse at center, rgba(154,92,255,1) 0%, rgba(92,1,239,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9a5cff', endColorstr='#5c01ef', GradientType=1 );

	width:1000px; margin:auto;

	font:11px B Homa;	

	font-weight:normal;	

	direction:rtl; padding:0px 0px 0px 0px;

	border-radius: 5px 0 0 5px;

	border-radius: 4px;   

}	

.menu li{

	display:inline-block;	

	padding:9px 5px; margin:0px;	

	transition:0.5s; } 

.menu li:hover{ 

	background: rgba(192,92,255,1);

background: -moz-radial-gradient(center, ellipse cover, rgba(192,92,255,1) 0%, rgba(148,0,240,1) 100%);

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(192,92,255,1)), color-stop(100%, rgba(148,0,240,1)));

background: -webkit-radial-gradient(center, ellipse cover, rgba(192,92,255,1) 0%, rgba(148,0,240,1) 100%);

background: -o-radial-gradient(center, ellipse cover, rgba(192,92,255,1) 0%, rgba(148,0,240,1) 100%);

background: -ms-radial-gradient(center, ellipse cover, rgba(192,92,255,1) 0%, rgba(148,0,240,1) 100%);

background: radial-gradient(ellipse at center, rgba(192,92,255,1) 0%, rgba(148,0,240,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c05cff', endColorstr='#9400f0', GradientType=1 );	

}	

.menu li ul{ 

	position:absolute; 

	margin:-5px; 

	padding:0px; 

	visibility:hidden; 

	opacity:0;

	background: rgba(198,92,255,1);

background: -moz-radial-gradient(center, ellipse cover, rgba(198,92,255,1) 0%, rgba(155,1,239,1) 100%);

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(198,92,255,1)), color-stop(100%, rgba(155,1,239,1)));

background: -webkit-radial-gradient(center, ellipse cover, rgba(198,92,255,1) 0%, rgba(155,1,239,1) 100%);

background: -o-radial-gradient(center, ellipse cover, rgba(198,92,255,1) 0%, rgba(155,1,239,1) 100%);

background: -ms-radial-gradient(center, ellipse cover, rgba(198,92,255,1) 0%, rgba(155,1,239,1) 100%);

background: radial-gradient(ellipse at center, rgba(198,92,255,1) 0%, rgba(155,1,239,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c65cff', endColorstr='#9b01ef', GradientType=1 );

	transition:0.5s; top:51px; 

}

 .menu li:hover > 

ul { 

	visibility:visible; 

	opacity:1; 

}

.menu li ul li{

	display:block;	

	padding:10px 10px;	

	margin:0px; 

}

.menu a{	

	color:white;	

	text-decoration:none; 

}

</style> 

</head> 

<body> 

<div class="menu"> 

<li><a href="#">صفحه نخست</a></li>

 <li><a href="#">انجمن</a></li>

 <li><a href="#">ثبت نام</a></li> 

<li><a href="#">ورود کاربران</a></li> 

<li><a href="#">تست4 </a></li> 

<li><a href="#">هاور یک*</a>

 <ul>

 <li><a href="#">متن هاور یک</a></li>

 <li><a href="#">متن هاور دو</a></li> 

<li><a href="#">متن هاور 3</a></li>

 </ul>

 </li> 

<li><a href="#">هاور دو*</a>

 <ul>

 <li><a href="#">متن هاور یک</a></li>

<li><a href="#">متن هاور 2</a></li>

 <li><a href="#">متن هاور سه</a></li>

 </ul> 

</li>

<div/> 

<body/><html/>

amirziv24

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

کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset=utf-8/><title>منو باز شو</title>

<style type="text/css">

.menu {

background: #444;

background: -moz-radial-gradient(center, ellipse cover, rgba(154,92,255,1) 0%, rgba(92,1,239,1) 100%);

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(154,92,255,1)), color-stop(100%, rgba(92,1,239,1)));

background: -webkit-radial-gradient(center, ellipse cover, rgba(154,92,255,1) 0%, rgba(92,1,239,1) 100%);

background: -o-radial-gradient(center, ellipse cover, rgba(154,92,255,1) 0%, rgba(92,1,239,1) 100%);

background: -ms-radial-gradient(center, ellipse cover, rgba(154,92,255,1) 0%, rgba(92,1,239,1) 100%);

background: radial-gradient(ellipse at center, #444 0%, #444 100%);

width:200px; margin:auto;

font:11px B Yekan;

font-weight:normal;

direction:rtl; padding:0px 0px 0px 0px;

border-radius: 5px 0 0 5px;

border-radius: 4px;

}

.menu li{

display:inline-block;

padding:10px 10px; margin:9px;

transition:0.5s; }

.menu li:hover{

background: #0EA0D8;;

background: -moz-radial-gradient(center, ellipse cover, rgba(192,92,255,1) 0%, rgba(148,0,240,1) 100%);

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(192,92,255,1)), color-stop(100%, rgba(148,0,240,1)));

background: -webkit-radial-gradient(center, ellipse cover, rgba(192,92,255,1) 0%, rgba(148,0,240,1) 100%);

background: -o-radial-gradient(center, ellipse cover, rgba(192,92,255,1) 0%, rgba(148,0,240,1) 100%);

background: -ms-radial-gradient(center, ellipse cover, rgba(192,92,255,1) 0%, rgba(148,0,240,1) 100%);

background: radial-gradient(ellipse at center, #0B6BA6 0%, #0B6BA6 3%);

}

.menu li ul{

position:absolute;

margin:-5px;

padding:0px;

visibility:hidden;

opacity:0;

background: #0B6BA6;;

background: -moz-radial-gradient(center, ellipse cover, #0B6BA6 0%, rgba#0B6BA6 100%);

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #0B6BA6), color-stop(100%, #0B6BA6));

background: -webkit-radial-gradient(center, ellipse cover, #ccc 0%, #0B6BA6 100%);

background: -o-radial-gradient(center, ellipse cover, #0EA0D8 0%, #0B6BA6 100%);

background: -ms-radial-gradient(center, ellipse cover, #0B6BA6 0%, #0B6BA6 100%);

background: radial-gradient(ellipse at center, #0EA0D8 0%, #0EA0D8 100%);

/*transition:0.5s; top:51px;*/

transition:0.5s; left:none; top:none; bottom:none; right:none;

}

.menu li:hover >

ul {

visibility:visible;

opacity:1;

}

.menu li ul li{

display:block;

padding:10px 10px;

margin:0px;

}

.menu a{

color:white;

text-decoration:none;

}

.auto-style1 {

	text-align: center;

}

</style>

</head>

<body>

<div class="menu">

<li><a href="#">صفحه نخست</a></li><br>

<li><a href="#">انجمن</a></li><br>

<li><a href="#">ثبت نام</a></li><br>

<li><a href="#">ورود کاربران</a>

<ul><li><a href="#">غیر فعال</a></li></ul></li><br>

<li><a href="#">تست4 </a></li><br>

<li><a href="#">هاور یک*</a><br>

<ul>

<li><a href="#">متن هاور یک</a></li>

<li><a href="#">متن هاور دو</a></li>

<li><a href="#">متن هاور سه</a></li>

</ul>

</li><br>

*/edit by AMIRZIV24/*

<br>

<div class="auto-style1"/>

<body/><html/>

تابلو اعلانات
	قوانین جدید - تالار گفتمان سایت ساز رزبلاگ درخواست تغيير نام کاربري اطلاع رساني از مشکل قالب هاي داخل پنل اطلاع رساني از مشکل امکانات سايت ها پيشنهادات خود را براي امکانات سايت ها و رزآپ اينجا بيان کنيد! پيشنهادات خود را براي امکانات انجمن ها اينجا بيان کنيد! آموزش جامع بهينه سازي سايت براي موتورهاي جستجوگر طراحي بنر ، لوگو ، هدر و ... ( با هزينه ) درخواست ويرايش قالب فقط در اين تاپيک ! تاپیک جامع اخطار ها و کاربران اخراج شده دلیل

تعداد بازدید 906 اولین کد نویسی من{منوی باز شو}لطفا ببینید و نظر بدید
نویسنده	پیام