تالار گفتمان سایت ساز رزبلاگ

محمد عرفان

کاربر انجمن

جمعه 10 مهر 1394 - 18:11

اولین کد نویسی من{منوی باز شو}لطفا ببینید و نظر بدید

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

من چند وقتی هست دارم 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/>

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

ارسال پیام نقل قول لایک

❤ 6 تشکر توسط » zntboys poorya artadis a1382 amirziv24 mazyar1374

پاسخ ها

Ahmad

کاربر انجمن

چهارشنبه 15 مهر 1394 - 17:44

با سلام

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

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

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

موفق باشید/

وب کاربر

ارسال پیام نقل قول لایک

Ali Yazdani

چهارشنبه 15 مهر 1394 - 19:05

به عنوان اولین کار خوبه و جا داره بهت تبریک بگم

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

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

موفق و پیروز باشید./

یاعلی

وب کاربر ارسال پیام نقل قول لایک

آرمین اسدی

کاربر ویژه

چهارشنبه 15 مهر 1394 - 22:51

خوبـــــبود

وب کاربر ارسال پیام نقل قول لایک

پوریا

کاربر ویژه

پنجشنبه 16 مهر 1394 - 14:59

خیلی خوب بود

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

ارسال پیام نقل قول لایک

امیر فلاح

کاربر انجمن

پنجشنبه 16 مهر 1394 - 21:51

good

وب کاربر ارسال پیام نقل قول لایک

ARTADIS

جمعه 17 مهر 1394 - 00:18

nice!

وب کاربر ارسال پیام نقل قول لایک

امیرمحمد غیبی

کاربر انجمن

جمعه 17 مهر 1394 - 13:32

سلام

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

وب کاربر ارسال پیام نقل قول لایک

آرمین اسدی

کاربر ویژه

جمعه 17 مهر 1394 - 17:16

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

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

کد:


<!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/>

وب کاربر ارسال پیام نقل قول لایک

❤️ 1 تشکر توسط » amirziv24

امیر فلاح

کاربر انجمن

جمعه 10 اردیبهشت 1395 - 13:31

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

کد:

<!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/>