زمان جاری : یکشنبه 04 مهر 1400 - 3:56 قبل از ظهر
نام کاربری : پسورد : یا عضویت | رمز عبور را فراموش کردم




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

ارسال پاسخ
تعداد بازدید 575
نویسنده پیام
erfannn آفلاین



عضویت: 7 /7 /1394

تشکر شده : 6
اولین کد نویسی من{منوی باز شو}لطفا ببینید و نظر بدید
سلام به همه اساتید رزبلاگی

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



جمعه 10 مهر 1394 - 18:11
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
تشکر شده: 6 کاربر از erfannn به خاطر این مطلب مفید تشکر کرده اند: zntboys & poorya & artadis & a1382 & amirziv24 & mazyar1374 &
20-abzar آفلاین



ارسال‌ها : 1141
عضویت: 22 /8 /1393
محل زندگی: gorgan
سن: 23
شناسه یاهو: تلگرام @seyed_admin
تشکرها : 203
تشکر شده : 243
پاسخ : 1 RE اولین کد نویسی من{منوی باز شو}لطفا ببینید و نظر بدید
با سلام

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

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

موفق باشید/

امضای کاربر :
....بیست ابزار....



عاشقانه


. ⇢⇣⇠ اِی روزِگــــــار ⇢⇣⇠


یِکیـــو خوشگِــــل کَــردی●


یِکیـــو پــولـــــدار کَــردی●


یِکیـــو مَشهــــــور کَــردی ●


دَمِــت گَــــرم ➽


مــا رو ↜فَقَــــط↝ کَــــردے♚☞
چهارشنبه 15 مهر 1394 - 17:44
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
koolak91 آفلاین



ارسال‌ها : 1750
عضویت: 27 /9 /1391
محل زندگی: زمین خدا
شناسه یاهو: ali.yazdani1666
تشکرها : 541
تشکر شده : 683
پاسخ : 2 RE اولین کد نویسی من{منوی باز شو}لطفا ببینید و نظر بدید
به عنوان اولین کار خوبه و جا داره بهت تبریک بگم
ولی باید بیشتر کار کنی و تو قسمت رنگبندی هم دقت کنی
مثلا رنگ خاکستری یا طوسی با رنگ آبی کمرنگ اصلا ترکیب رنگیِ مناسبی نیستن و برای جذابتر و زیباتر شدن میتونی رنگ طوسی و رنگ قرمز رو در ترکیبِ رنگیت استفاده کنی که خیلی زیباتر هم میشه
موفق و پیروز باشید./
یاعلی

امضای کاربر :
السلام علیک یا ابا عبدالله الحسین(علیه السلام)
دلم... یک اتفاق تازه می خواهد..!!
نه مثل عشق و دل دادن..؛
نه در دام غم افتادن..؛
دگر اینها گذشت از ما..!
شبیه شوق یک کودک..
که کفش نو به پا دارد
و گویی کل دنیا را..
در آن لحظه به زیر کفشها دارد،
دلم یک شور بی اندازه می خواهد!
فقط گاهی...
دلم ... یک اتفاق تازه می خواهد..!!



(نوشته های خودتون رو در کولاک91 به نمایش بگذارید)
وبسایت شخصی من
چهارشنبه 15 مهر 1394 - 19:05
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
zntboys آفلاین



ارسال‌ها : 1709
عضویت: 20 /3 /1391
محل زندگی: Turk Boy
شناسه یاهو: یکی برام بساز بده بزارم اینجا!!!
تشکرها : 1578
تشکر شده : 1545
پاسخ : 3 RE اولین کد نویسی من{منوی باز شو}لطفا ببینید و نظر بدید
خوبـــــبود

امضای کاربر :
ریپ و ترجمه حرفه ای قالب از طریق تلگرام تماس بگیرید.
WELLBORNARMIN@

...... انجمن تخصصي و تفريحي اذ سنتر ......
www.azcenter.rzb.ir
znt.boys@yahoo.com
چهارشنبه 15 مهر 1394 - 22:51
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
poorya آفلاین



ارسال‌ها : 2132
عضویت: 17 /6 /1391
محل زندگی: تهران
سن: 24
تشکرها : 2471
تشکر شده : 1960
پاسخ : 4 RE اولین کد نویسی من{منوی باز شو}لطفا ببینید و نظر بدید
خیلی خوب بود
فقط همونطور که دوستان گفتن، جزییات کار مثل رنگبندی رو بهتر کنی دیگه عالی میشه

امضای کاربر : مردان بزرگ اراده می کنند و مردان کوچک آرزو
اگر روزی دشمن پیدا کردی، بدان که در رسیدن به هدفت موفق بودی.
اگر روزی تهدیتت کردند، بدان در برابرت ناتوانند.
لیست تاپیک های جامع! | قبل از ارسال تاپیک حتما بخونیدش
اینم صندلی داغ ما | رای گیری صندلی داغ

Instagram : poorya_ezzati
پنجشنبه 16 مهر 1394 - 14:59
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
amirziv24 آفلاین



ارسال‌ها : 135
عضویت: 1 /5 /1394
محل زندگی: Kuhdasht
سن: 14
شناسه یاهو: amirziv24
تشکرها : 18
تشکر شده : 31
پاسخ : 5 RE اولین کد نویسی من{منوی باز شو}لطفا ببینید و نظر بدید

good

امضای کاربر :


...we have to be x-large

now I am medium

I need a change. a helpful change
.
.
.
.
.
.
.
.

... coming soon with a big work

Just Coming Soon
پنجشنبه 16 مهر 1394 - 21:51
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
artadis آفلاین



ارسال‌ها : 632
عضویت: 27 /9 /1391
محل زندگی: خونه ی دلشکستگان
سن: 22
شناسه یاهو: artadis_rom
تشکرها : 162
تشکر شده : 582
پاسخ : 6 RE اولین کد نویسی من{منوی باز شو}لطفا ببینید و نظر بدید
nice!

امضای کاربر :

من تنهـــــــــــــــــــــ مثل ماهی توی تنگ ـــــــــــــام

فکرم دریاســـــــــــــــــ نه که آب توی حوض ــــــــــت

خودت و خدای خوبیات ... لشبازیات همراه لاشی بازیت

با من بودنات ونبودنات ... فکرم پیشت و تو هم بغل جوون کنات


...در پناه حق فرمود حذف کنم...
جمعه 17 مهر 1394 - 00:18
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
a1382 آفلاین



ارسال‌ها : 9
عضویت: 15 /5 /1394
محل زندگی: آذربایجان شرقی
تشکرها : 4
تشکر شده : 2
پاسخ : 7 RE اولین کد نویسی من{منوی باز شو}لطفا ببینید و نظر بدید
سلام
واس اولین بار عالی شده ولی رو رنگبندی بیشتر کار کن.

جمعه 17 مهر 1394 - 13:32
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
zntboys آفلاین



ارسال‌ها : 1709
عضویت: 20 /3 /1391
محل زندگی: Turk Boy
شناسه یاهو: یکی برام بساز بده بزارم اینجا!!!
تشکرها : 1578
تشکر شده : 1545
پاسخ : 8 RE اولین کد نویسی من{منوی باز شو}لطفا ببینید و نظر بدید
چیه همه به رنگ بند کردین کار گرافیکی که نیست کده کد خخخخ

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


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


امضای کاربر :
ریپ و ترجمه حرفه ای قالب از طریق تلگرام تماس بگیرید.
WELLBORNARMIN@

...... انجمن تخصصي و تفريحي اذ سنتر ......
www.azcenter.rzb.ir
znt.boys@yahoo.com
جمعه 17 مهر 1394 - 17:16
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
تشکر شده: 1 کاربر از zntboys به خاطر این مطلب مفید تشکر کرده اند: amirziv24 /
amirziv24 آفلاین



ارسال‌ها : 135
عضویت: 1 /5 /1394
محل زندگی: Kuhdasht
سن: 14
شناسه یاهو: amirziv24
تشکرها : 18
تشکر شده : 31
پاسخ : 9 RE اولین کد نویسی من{منوی باز شو}لطفا ببینید و نظر بدید
سلام من یه ویرایشی زدم بهش فکر میکنم اینمدلی هم خوب باشه:

کد:
<!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/>


امضای کاربر :


...we have to be x-large

now I am medium

I need a change. a helpful change
.
.
.
.
.
.
.
.

... coming soon with a big work

Just Coming Soon
جمعه 10 اردیبهشت 1395 - 13:31
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
تشکر شده: 1 کاربر از amirziv24 به خاطر این مطلب مفید تشکر کرده اند: mazyar1374 /
ارسال پاسخ



برای ارسال پاسخ ابتدا باید لوگین یا ثبت نام کنید.


پرش به انجمن :