PDA

View Full Version : کمک در طراحی یک قسمت از منو


maktab
چهارشنبه 03 اسفند 1390, 13:14 عصر
سلام
یه منو افقی دارم که زیر منو عمودی داره. درست هم کار میکنه. حالا میخوام برای زیر منوهاش هم زیر منو بزارم بصورتی که وقتی موس روی زیر منو اولی رفت زیر منو بعدی بصورت عمودی در در کنار منوها ظاهر بشه.
شبیه این سایت:
http://www.cssdrive.com/index.php

من منو را با ul li نوشتم و از اسکریپت هم استفاده نکردم. (نمیخوام استفاده کنم)
حالا چطور زیر منو دوم را درست کنم؟
soroush.r70
چهارشنبه 03 اسفند 1390, 15:13 عصر
یه پیشنهاد برات دارم شما برو تو همون لینکی که دادی روی سایت راست کلیک کن view page source رو بزن بعد ببین با منو چی کار کرده البته اگه از جور منوها لازم داری یهم بگو تا برات چندتا نمونه بزارم .
maktab
چهارشنبه 03 اسفند 1390, 17:47 عصر
یه پیشنهاد برات دارم شما برو تو همون لینکی که دادی روی سایت راست کلیک کن view page source رو بزن بعد ببین با منو چی کار کرده البته اگه از جور منوها لازم داری یهم بگو تا برات چندتا نمونه بزارم .

یکم پیچونده! اگه میشه یه نمونه کد برام بزار. من فقط زیر منو دوم را مشکل داره. تا الان اینها را دارم:


ul
ul li
ul li ul
ul li ul li

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


ul li ul li ul
ul li ul li ul li

را چی تنظیم کنم که همون طوری که میخوام کار کنند؟ چون الان درست جواب نمیده.
Saber Mogaddas
چهارشنبه 03 اسفند 1390, 18:27 عصر
سلام دقیقا مثل زیر منو اولی عمل کن فرق نمیکنه که..داخل زیر منویی که می خوایی زیر زیر منو باشه ul و li رو قرار میدی..
maktab
چهارشنبه 03 اسفند 1390, 19:27 عصر
سلام دقیقا مثل زیر منو اولی عمل کن فرق نمیکنه که..داخل زیر منویی که می خوایی زیر زیر منو باشه ul و li رو قرار میدی..
خب من هم میدونم فرق نمیکنه. منظورم توی قسمت css هست. وقتی مثل زیر منو اولی برای زیر منوی دومی توی css کد مینویسم. زیر منو دومی تو دل زیر منو اولی هستش در صورتی که من میخوام درکنار اون باز بشه.
اگر میشه یه نمونه کد ساده بزارید.
Saber Mogaddas
پنج شنبه 04 اسفند 1390, 10:44 صبح
سلام
دمو (http://ago.tanfa.co.uk/css/examples/menu/vs7.html) چیزی که میخواهید
و آموزش (http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html) این دمو ..
من با jquery منوهامو طراحی میکنم..با css نمی تونم چیزایه متفاوتی درست کنم محدود هست ولی js محدودیتی نداره..و هر بلایی که دلم می خواد سر منو در میارم..
به هر حال این منو که گفتم کاملا با css ساخته شده .. نمونه های زیادی داره..
موفق باشی..
maktab
پنج شنبه 04 اسفند 1390, 23:55 عصر
سلام
دمو (http://ago.tanfa.co.uk/css/examples/menu/vs7.html) چیزی که میخواهید
و آموزش (http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html) این دمو ..
من با jquery منوهامو طراحی میکنم..با css نمی تونم چیزایه متفاوتی درست کنم محدود هست ولی js محدودیتی نداره..و هر بلایی که دلم می خواد سر منو در میارم..
به هر حال این منو که گفتم کاملا با css ساخته شده .. نمونه های زیادی داره..
موفق باشی..
ولی این اونی نیست که من میخوام.
یه نمونه کد ساده الان نوشتم ببینید اینطوری میخوام باشه:


#newMenu
{
float: left;
width: 700px;
height: auto;
}
#newMenu ul
{
width: 700px;
}
#newMenu ul li
{
width: 150px;
background-color: #00FF00;
height: 20px;
float: left;
}
#newMenu ul li:hover ul
{
display: block;
}
#newMenu ul li ul
{
display: none;
width: 150px;
height: auto;
float: left;
position: relative;
}
}#newMenu ul li ul li
{
width: 150px;
height: auto;
background-color: #FF0000;
float: left;
}
#newMenu ul li ul li:hover ul
{
display: block;
}
#newMenu ul li ul li ul
{
display: none;
position: absolute;
}
#newMenu ul li ul li ul li
{
width: 150px;
height: auto;
background-color: #FF0000;
float: left;
}




<div id="newMenu">
<ul>
<li>
ul 1
<ul>
<li>li 1-1</li>
<li>li 1-2
<ul>
<li>li 1-1-1</li>
<li>li 1-1-2</li>
<li>li 1-1-3</li>
</ul>
</li>
<li>li 1-3</li>
</ul>
</li>
<li>
ul 2
<ul>
<li>li 2-1</li>
<li>li 2-2</li>
<li>li 2-3</li>
</ul>
</li>
<li>
ul 3
</li>
<li>
ul 4
</li>
</ul>
</div>


حالا اشکالات این منو:
زیر منو دوم چرا همیشه هستش؟ البته میشه با یه ترفند و استفاده از visibility درستش کرد.
اشکال دوم که نمیدونم چکارش کنم، چرا زیر منو دوم داخل زیر منو اول اومده؟ من میخوام خارج از اون باشه مثل لینکی که دادم.
yones_safari
جمعه 05 اسفند 1390, 11:57 صبح
سلام و درود.
دادا اشکالهایی که داشتی اینه:
1-عرض برای li مشخص نکرده بودی که من 20px تنظیم کردم.
2-margin رو براشون تنظیم نکرده بودی که من 150px از چپ و 20px- از بالا تنظیم کردم:

margin:-20px 0 0 150px;
3-برای نمایش و مخفی کردن زیر منوها هم از visibility به جای display استفاده کردم.
4-margin و padding صفر رو برای ul اصلی ست نکرده بودی.
کپی همون چیزی که گفتی ساختم.
http://up98.org/upload/server1/02/c/ezb7ondjc993bym7fa.png

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="yones" />
<title>menu</title>
<style type="text/css">
#newMenu
{
float: left;
width: 700px;
height: auto;
}
#newMenu ul
{
list-style: none;
margin: 0;
padding: 0;
width: 700px;
}
#newMenu ul li
{
width: 150px;
background-color: #00FF00;
height: 20px;
float: left;
}
#newMenu ul li:hover ul
{
display: block;
}
#newMenu ul li ul
{
display: none;
width: 150px;
height: auto;
float: left;
}
#newMenu ul li ul li
{
width: 150px;
height: 20px;
background-color: silver;
float: left;
}
#newMenu ul li ul li:hover ul
{
visibility: visible;
margin:-20px 0 0 150px;
}
#newMenu ul li ul li ul
{
margin:-20px 0 0 150px;
visibility: hidden;
}
#newMenu ul li ul li ul li
{
width: 150px;
height: auto;
background-color: #FF0000;
float: left;
}
</style>
</head>
<body>
<div id="newMenu">
<ul>
<li>
ul 1
<ul>
<li>li 1-1</li>
<li>li 1-2
<ul>
<li>li 1-2-1</li>
<li>li 1-2-2</li>
<li>li 1-2-3</li>
</ul>
</li>
<li>li 1-3</li>
</ul>
</li>
<li>
ul 2
<ul>
<li>li 2-1</li>
<li>li 2-2</li>
<li>li 2-3
<ul>
<li>li 2-3-1</li>
<li>li 2-3-2</li>
<li>li 2-3-3</li>
</ul>
</li>
</ul>
</li>
<li>
ul 3
</li>
<li>
ul 4
</li>
</ul>
</div>


</body>
</html>
موفق باشید.
maktab
جمعه 05 اسفند 1390, 14:57 عصر
1-عرض برای li مشخص نکرده بودی که من 20px تنظیم کردم.

ممنون
ولی من نمیخوام عرض li را تنظیم کنم. چون من دارم اطلاعات منو را از بانک میخوانم میخوام اگر اسم منو طولاتی باشه عرض منو بیشتر بشه برای همین auto معرفی کردم. که در این صورت باز هم بهم میخوره. راه چاره چیه؟
maktab
جمعه 05 اسفند 1390, 17:39 عصر
میشه یه توضیح در مورد display و visibility بدید که چرا توی زیر منو دوم display دیگه جواب نمیده!؟ من الان خواستم برای زیر منو دوم (قرمز رنگ) یه زیر منو دیگه بسازم ولی باز هم این مشکل بود که مخفی نمیشد این بار display و visibility هر دو جواب نمیدن.
اگر میشه بگید قضیه چیه تا بتونم خودم هر چقدر بخوام توسعش بدم.
ممنون
yones_safari
جمعه 05 اسفند 1390, 20:33 عصر
ممنون
ولی من نمیخوام عرض li را تنظیم کنم. چون من دارم اطلاعات منو را از بانک میخوانم میخوام اگر اسم منو طولاتی باشه عرض منو بیشتر بشه برای همین auto معرفی کردم. که در این صورت باز هم بهم میخوره. راه چاره چیه؟
عزیزم انوقت دیگه منو نمیشه انشاء میشه.به هر حال overflow رو visible کن تا هر چقدر باشه نشون بده.

overflow: visible;
yones_safari
جمعه 05 اسفند 1390, 23:45 عصر
میشه یه توضیح در مورد display و visibility بدید که چرا توی زیر منو دوم display دیگه جواب نمیده!؟ من الان خواستم برای زیر منو دوم (قرمز رنگ) یه زیر منو دیگه بسازم ولی باز هم این مشکل بود که مخفی نمیشد این بار display و visibility هر دو جواب نمیدن.
اگر میشه بگید قضیه چیه تا بتونم خودم هر چقدر بخوام توسعش بدم.
ممنون
عزیزم شرمنده خواستم جواب سوال دومت رو بدم کار برام پیش اومد رفتم اعلان اومدم.
دادا ببین میدونی چرا کار نمیکنه؟!چون خواص رو از عناصر بالا به ارث میبره برای حذف وراثت از !important به صورت زیر استفاده کن:

visibility: visible !important;

http://up98.org/upload/server1/02/c/pu1ggzt5fb5fzk9p9otp.png
کدی که برای 2 زیر منو نوشتم رو میزارم:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="yones" />
<title>menu</title>
<style type="text/css">
#newMenu
{
float: left;
width: 700px;
height: auto;
}
#newMenu ul
{
list-style: none;
margin: 0;
padding: 0;
width: 700px;
}
#newMenu ul li
{
width: 150px;
background-color: #00FF00;
height: 20px;
float: left;
}
#newMenu ul li:hover ul
{
display: block;
}
#newMenu ul li ul
{
display: none;
width: 150px;
height: auto;
float: left;
}
#newMenu ul li ul li
{
width: 150px;
height: 20px;
background-color: silver;
float: left;
}
#newMenu ul li ul li ul
{
width: 150px;
height: 20px;
float: left;
}
#newMenu ul li ul li:hover ul
{
visibility: visible;
margin:-20px 0 0 150px;
}
#newMenu ul li ul li ul
{
margin:-20px 0 0 150px;
visibility: hidden;
}
#newMenu ul li ul li ul li:hover ul
{

margin:-20px 0 0 150px;
visibility: visible !important;
}
#newMenu ul li ul li ul li ul
{

margin:-20px 0 0 150px;
visibility: hidden !important;
}
#newMenu ul li ul li ul li
{
width: 150px;
height: auto;
background-color: #FF0000;
float: left;
}
#newMenu ul li ul li ul li ul li
{
width: 150px;
height: auto;
background-color: #ECC7EF;
float: left;
}
</style>
</head>
<body>
<div id="newMenu">
<ul>
<li>
ul 1
<ul>
<li>li 1-1</li>
<li>li 1-2
<ul>
<li>li 1-2-1</li>
<li>li 1-2-2</li>
<li>li 1-2-3
<ul>
<li>li 1-2-3-1</li>
<li>li 1-2-3-2</li>
<li>li 1-2-3-3</li>
</ul>
</li>
</ul>
</li>
<li>li 1-3</li>
</ul>
</li>
<li>
ul 2
<ul>
<li>li 2-1</li>
<li>li 2-2</li>
<li>li 2-3
<ul>
<li>li 2-3-1</li>
<li>li 2-3-2</li>
<li>li 2-3-3</li>
</ul>
</li>
</ul>
</li>
<li>
ul 3
</li>
<li>
ul 4
</li>
</ul>
</div>


</body>
</html>
موفق باشید.