PDA

View Full Version : سوال: نیاز به آموزش ساخت منو



css-man
سه شنبه 09 اسفند 1390, 16:07 عصر
دوستا من میخوام منای drop down بسازم ولی بلد نیستم

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

کسی میتونه توضیح بده یا آموزش بده؟

khanlo.javid
سه شنبه 09 اسفند 1390, 16:23 عصر
با سلام

دوست عزیز فایل زیرو دانلود کن تغییراتش پای خودت.

دانلود (http://upin.ir/images/6xvmmqurrmvos0ecyhei.rar)

موفق باشی.

css-man
سه شنبه 09 اسفند 1390, 17:40 عصر
اگر یاد نگرفتم باز سوال میکنم اگر ایراد نداشته باشه

css-man
سه شنبه 09 اسفند 1390, 17:45 عصر
عجب مجموعه کاملی بود دسدت درد نکنه
والا میخواستم طراحی رو یاد بگیرم

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

khanlo.javid
سه شنبه 09 اسفند 1390, 18:21 عصر
باشه مشکلی نداره

css-man
سه شنبه 09 اسفند 1390, 18:24 عصر
اینا رو دیدم اینا خیلی حرفه ایه
می شه آموزش بدید

حالا مثل این هم نه یه نمونه مثال رو آموزش بدید که بتونم خودم طراحی کنم
مرسی

nasim e
سه شنبه 09 اسفند 1390, 18:27 عصر
سلام ببخشید من تقریبا تازه واردم توی این بحث می خواستم بپرسم چه جوری میشه این منو هارو ساخت؟

css-man
سه شنبه 09 اسفند 1390, 18:28 عصر
والا منوی ساده افقی رو من بلدم

ولی مشکلم با زیر منو هاست که چطور طراحی میشن دوستان فکر کنم که آموزش رو بزارن هم من هم شما یاد میگیریم

khanlo.javid
سه شنبه 09 اسفند 1390, 18:33 عصر
سلام ببخشید من تقریبا تازه واردم توی این بحث می خواستم بپرسم چه جوری میشه این منو هارو ساخت؟
با سلام دوست عزیز این کا با ترکیب html و css و اگر نیاز بشه کمی هم جاوااسکریپت که انشاءالله براتون توضیح میدم.
به امید دیدار در همین تاپیک.


موفق باشید.

khanlo.javid
سه شنبه 09 اسفند 1390, 18:35 عصر
آموزش منو های آبشاری فردا ساعت 3.30 دقیقه در همین تاپیک شروع میشه جا نمونید.




موفق باشید.

nasim e
سه شنبه 09 اسفند 1390, 18:36 عصر
مرسی امیدوارم زودتر آموزش بدن!!

khanlo.javid
سه شنبه 09 اسفند 1390, 18:40 عصر
دوستان برای اینکه این اموزش رو خوب یاد بگیرن باید حتما به خوبی html,css خوب بلد باشن.

css-man
سه شنبه 09 اسفند 1390, 18:42 عصر
اینا رو بلدم کمی هم جاوا اسکریپت بلدم

khanlo.javid
سه شنبه 09 اسفند 1390, 18:44 عصر
اینا رو بلدم کمی هم جاوا اسکریپت بلدم
عالیه css-man انشاءالله اگه فردا سرم خلوت بشه حتما آموزشو شروع میکنم.



آرزوی موفقیت برای تمامی شما برنامه نویس های جوان.

nasim e
سه شنبه 09 اسفند 1390, 22:44 عصر
خیلی خوبه.ممنون.سعی می کنم باشم آخه فردا همین آموزشگاه برنامه نویس کلاس دارم.

khanlo.javid
چهارشنبه 10 اسفند 1390, 15:29 عصر
خوب دوستان دوباره سلام

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

مرحله اول ==> ما برای اینکه این نوع من ها رو بسازم از لیست ها استفاده میکنیم.

شروع این کدو تو یک صفحه html در قسمت bodyکپی کنید.

<ul id="menu">
<li><a href="#">home</a></li>
<li><a href="#">contact</a>
<ul class="submenu">
<li><a>servise 1</a></li>
<li><a>servise 2</a></li>
<li><a>servise 3</a></li>
<li><a>servise 4</a></li>
<li><a>servise 5</a></li>
<li><a>servise 6</a></li>
</ul>
</li>
<li><a href="#">servises</a>
<ul class="submenu">
<li><a>servise 1</a></li>
<li><a>servise 2</a></li>
<li><a>servise 3</a></li>
<li><a>servise 4</a></li>
<li><a>servise 5</a></li>
<li><a>servise 6</a></li>
</ul>
</li>
<li><a href="#">about</a></li>
<li><a href="#">map</a></li>
</ul>

تا اینجا داشته باشید تا مرحله بعدو بگم.

khanlo.javid
چهارشنبه 10 اسفند 1390, 15:32 عصر
مرحله 2 ==> اضافه کردن استایل زیر شاخه و طرح منو اگه خواستید میتونید تغییرش بدید.

این کدو در قسمت head سایت خودتون قرار بدید.

<style>
body
{
margin: 0;
padding: 0;
behavior: url("csshover.htc");
}
#menu, #menu ul
{
list-style: none;
border: 1px solid #000;
background-color: #ecffec;
padding: 0 0 26px 0;
margin: 0;
}
#menu li
{
float: left;
margin-right: 3px;
position: relative;
border: 1px solid #ecffec;
}
#menu ul
{
position: absolute;
top: 25px;
left: -1px;
width: 150px;
padding: 0;
display: none;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
line-height: 15px;
}
#menu a:link, #menu a:visited
{
display: block;
font-family: Tahoma;
font-size: 0.75em;
font-weight: bold;
text-align: left;
text-decoration: none;
color: #000;
padding: 5px;
}
#menu li:hover
{
background-color: #ffd98a;
border: 1px solid #000;
}
#menu li:hover ul.submenu
{
display: block;
}
#menu ul.submenu ul
{
top: 5px;
left: 150px;
display: none;
}
#menu ul.submenu li:hover ul
{
display: block;
}
#menu ul a:link, #menu ul a:visited
{
border-left: 20px solid #c0c0c0;
}
.hr
{
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #ffffff;
height: 0px;
}
</style>

خوب این مرحله رو هم داشته باشید تا توضیحات و بگم.

css-man
چهارشنبه 10 اسفند 1390, 15:36 عصر
اگر امکان داره توضیح هم بدید که بهتر یاد بگیریم
من با خط 8 مشکل دارم

چرا 2 باز آی دی رو نوشتی

یه توضیح راجع به اون خط بده مرسی

khanlo.javid
چهارشنبه 10 اسفند 1390, 15:41 عصر
خوب دوستان تا اینجا منو به درستی کار میکنه و حالت آبشاری خودشو داره آمید وارم این کدو به درستی نگاه کنیدو اگه هم جای از کدو متوجه نشدید من در خدمتتون هستم.

و در آخر کد کامل صفحه رو براتون گذاشتم.

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body
{
margin: 0;
padding: 0;
behavior: url("csshover.htc");
}
#menu, #menu ul
{
list-style: none;
border: 1px solid #000;
background-color: #ecffec;
padding: 0 0 26px 0;
margin: 0;
}
#menu li
{
float: left;
margin-right: 3px;
position: relative;
border: 1px solid #ecffec;
}
#menu ul
{
position: absolute;
top: 25px;
left: -1px;
width: 150px;
padding: 0;
display: none;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
line-height: 15px;
}
#menu a:link, #menu a:visited
{
display: block;
font-family: Tahoma;
font-size: 0.75em;
font-weight: bold;
text-align: left;
text-decoration: none;
color: #000;
padding: 5px;
}
#menu li:hover
{
background-color: #ffd98a;
border: 1px solid #000;
}
#menu li:hover ul.submenu
{
display: block;
}
#menu ul.submenu ul
{
top: 5px;
left: 150px;
display: none;
}
#menu ul.submenu li:hover ul
{
display: block;
}
#menu ul a:link, #menu ul a:visited
{
border-left: 20px solid #c0c0c0;
}
.hr
{
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #ffffff;
height: 0px;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">home</a></li>
<li><a href="#">contact</a>
<ul class="submenu">
<li><a>servise 1</a></li>
<li><a>servise 2</a></li>
<li><a>servise 3</a></li>
<li><a>servise 4</a></li>
<li><a>servise 5</a></li>
<li><a>servise 6</a></li>
</ul>
</li>
<li><a href="#">servises</a>
<ul class="submenu">
<li><a>servise 1</a></li>
<li><a>servise 2</a></li>
<li><a>servise 3</a></li>
<li><a>servise 4</a></li>
<li><a>servise 5</a></li>
<li><a>servise 6</a></li>
</ul>
</li>
<li><a href="#">about</a></li>
<li><a href="#">map</a></li>
</ul>
</body>
</html>


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

khanlo.javid
چهارشنبه 10 اسفند 1390, 15:43 عصر
کدو بفرست تا بگم من دقیقا نمیدونم کدوم خطو میگی

css-man
چهارشنبه 10 اسفند 1390, 15:44 عصر
کدوم خاصیت باعث میشه زیر منو ها وقتی مشخص بشن که موس روی منوی اصلی میره؟

css-man
چهارشنبه 10 اسفند 1390, 15:45 عصر
#menu, #menu ul
{
list-style: none;
border: 1px solid #000;
background-color: #ecffec;
padding: 0 0 26px 0;
margin: 0;
}

khanlo.javid
چهارشنبه 10 اسفند 1390, 15:46 عصر
دقیقا این کد باعث میشه وقتی ماوس روی منو میره زیر شاخه هاش بازبشه.

#menu li:hover ul.submenu
{
display: block;
}

khanlo.javid
چهارشنبه 10 اسفند 1390, 15:51 عصر
برای اینکه تغییرات استایل ظاهری دقیقا بیاد و روی ul اصلی قرار بگیره لازمه که بهش بگی که آدی منو , آدی ul

css-man
چهارشنبه 10 اسفند 1390, 16:03 عصر
مگه این همون معنی رو نمیده



#menu ul

khanlo.javid
چهارشنبه 10 اسفند 1390, 16:03 عصر
css-man عزیز جواب داد یا نه؟؟

khanlo.javid
چهارشنبه 10 اسفند 1390, 16:07 عصر
چرا ولی منظورش اینه که این تظیمات استایلی که برای منوی اصلی هست برای زیر شاخه های من نیز استفاده شه حال برای اینکه بهتر بفهمی چی میگم اون menu ul #, رو حذف کن تا ببینی چه اتفاقی میفته!!

css-man
چهارشنبه 10 اسفند 1390, 16:11 عصر
همه چیز درسته خوب هم کار میکنه

چند تا سوال دارم

1- برای تغییر استایل زیر منو باید کدوم قسمت رو تغییر داد؟
2- میشه به هر گزینه منوی اصلی یک بکگراند داد و به زیر منوهم یک بکگراند دیگه؟

khanlo.javid
چهارشنبه 10 اسفند 1390, 16:15 عصر
آره میتونی ولی باید یه کم دست کاری کنی که وقت زیادی میبره و باید روش کار کنی واما سوال اولت منظورت کدوم استایلشه؟؟

mahdy.asia
جمعه 18 فروردین 1391, 18:50 عصر
من تاپیک شما رو مطالعه کردم چیزای زیادی یاد گرفتم اما من یک منو دارم که می خواهم اون رو راست چین کنم اما هر چه تلاش کردم نتونستم اگه کسی می تونه اونو راست چین کنه و بگه کجای کد رو اصلاح کرده متشکر می شم فایل ها رو پیوست می کنم

mahdy.asia
جمعه 18 فروردین 1391, 23:38 عصر
من مشکل منوی فارسی رو بر طرف کردم که نمونه فایل تصحیح شده رو پیوست می کنم اگه کسی خواست استفاده کنه در همین پیوست یک مشکل دیگه دارم
من برای پنل سمت راست یک spliter در نظر گرفتم که نتونستم اونو بکار بیندازم (می خوام پنل سمت راست را بتوان از عرض تغییر داد) لطفا صفحات را در اینترنت اکسپلور ببینید

mahdi_sohrabi
دوشنبه 06 شهریور 1391, 18:25 عصر
با سلام و عرض خسته نباشید.
ممنون از درس های زیبای شما.
می خواستم ببینم قسمت style را در css می شود نوشت؟؟؟

khanlo.javid
دوشنبه 06 شهریور 1391, 19:09 عصر
با سلام و عرض خسته نباشید.
ممنون از درس های زیبای شما.
می خواستم ببینم قسمت style را در css می شود نوشت؟؟؟

بله میشه فرقی نداره فقط باید فایل css رو به صفحتون متصل کنید. همین


موفق باشید.

esmaeilbf
شنبه 15 مهر 1391, 19:59 عصر
در مورد تکه کد behavior بیشتر توضیح بدین!
body
{
margin: 0;
padding: 0;
behavior: url("csshover.htc");
}

khanlo.javid
یک شنبه 16 مهر 1391, 07:45 صبح
در مورد تکه کد behavior بیشتر توضیح بدین!
body
{
margin: 0;
padding: 0;
behavior: url("csshover.htc");
}



دوست عزیز به لینک زیر مراجعه کنید.

http://reference.sitepoint.com/css/behavior


موفق باشید.

h.torabi
جمعه 13 بهمن 1391, 15:43 عصر
میشه خودت یک توضیح بدی ()CSS BEHAVIOR (http://www.css3.com/css-behavior/)اخه انگلیسی..................
متشکرم.

mahdi.iqu
سه شنبه 03 اردیبهشت 1392, 02:18 صبح
تشکر از تایپیکتون
1- آیا با اضافه کردن تعداد نامحدود زیر منو این کد ها جواب میده(منظور این هست که تماما آبشاری میشند!)
2-شما که زحمت این تایپیک رو کشیدید کمی بازش کنید تا کسانی امصال من بیشتر متوجه موضوع بشند.
شما کد ها رو قرار دادید بی زحمت خط به خط توضیح بدید(لطفا) چون خیلی چیز مهمی هست این قضیه