PDA

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


Dash mehdi
پنج شنبه 04 خرداد 1391, 13:28 عصر
سلام خدمات همه دوستان

من مبتدی هستم و شدیدا به کمک شما نیاز دارم.
من یه قالب html دارم که می خوام منوهاش رو ابشاری کنم ولی هیچ گونه تجربه ای ندارم و نمیدونم چی کار کنم.
حالا اگه شما دوستان میتونید کمک کنید بگید که این کارو انجام بدیم.

ممنون
منتظرم...:خجالت:
Saber Mogaddas
پنج شنبه 04 خرداد 1391, 15:28 عصر
سلام
تو این لینک (http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html)1 لینک (http://www.cssnewbie.com/easy-css-dropdown-menus/) 2 به صورت گام بگام آموزش menu هست نگاه کن هر جا به مشکل بر خوردی بپرس..
فقط نقطه های که باید توجه کنی چگونگی انتخاب یا select کردن تگ ها و استایل هاشون هست ..
برای زیبا سازی منو و منوهای پیشرفته هم این (http://www.smashingapps.com/2011/12/22/30-amazingly-great-css-menu-tutorials.html) منبع خوبی هست ..
موفق باشی..
Dash mehdi
پنج شنبه 04 خرداد 1391, 15:36 عصر
سلام
تو این لینک (http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html)1 لینک (http://www.cssnewbie.com/easy-css-dropdown-menus/) 2 به صورت گام بگام آموزش menu هست نگاه کن هر جا به مشکل بر خوردی بپرس..
فقط نقطه های که باید توجه کنی چگونگی انتخاب یا select کردن تگ ها و استایل هاشون هست ..
برای زیبا سازی منو و منوهای پیشرفته هم این (http://www.smashingapps.com/2011/12/22/30-amazingly-great-css-menu-tutorials.html) منبع خوبی هست ..
موفق باشی..
شما نمیتونید برام انجام بدید؟
خدایی بدجور کارم گیره...
Saber Mogaddas
جمعه 05 خرداد 1391, 01:29 صبح
سلام
خوب بهتره که خودتون یاد بگیرین..من فقط کمک می کنم که مشکلت حل شه..درستش اینه.. حالا شما منوی چه شکلی نیاز داری توضیح بده تا یه طرح خام بدم بهت رو استایلش خودت کار کن..
Dash mehdi
جمعه 05 خرداد 1391, 08:35 صبح
سلام
خوب بهتره که خودتون یاد بگیرین..من فقط کمک می کنم که مشکلت حل شه..درستش اینه.. حالا شما منوی چه شکلی نیاز داری توضیح بده تا یه طرح خام بدم بهت رو استایلش خودت کار کن..
برای قسمت هدر می خوام.
می خوام وقتی موس روش میره به صورت کشویی به سمت پایین باز بشه.
اگه میشه نحوه قرار دادن در فایل هم بگید.

واقعا ممنون
lady64
جمعه 05 خرداد 1391, 14:27 عصر
ممنون من استفاده کردم و جواب داد . فقط یک سوال چطور میشه در این کد یک خط عمودی بین لینک ها قرار داد که نوشته ها جدا از هم دیده بشن.



<!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>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css">
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }

#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
</style>
</head>
<body>
<ul id="navbar">
<li><a href="#">Item One</a><ul>
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li></ul>
</li>
<!-- ... and so on ... -->
<ul id="navbar">
<li><a href="#">Item One</a><ul>
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li></ul>
</li>
<!-- ... and so on ... -->
</ul>
</body>
</html>
lady64
جمعه 05 خرداد 1391, 19:37 عصر
دوستان سوال من خیلی سادست . فقط جوابشو نمیدونم !!! میخوام بین نوشته های منو ی افقیم خط عمودی ایجاد بشه
مثل این سایت :
http://www.webgardi2030.ir/
Gold_cpp
جمعه 05 خرداد 1391, 21:32 عصر
سلام
میتونید از outline، border یا کاراکتر | استفاده کنید ولی
شما منوی خودتون رو اشتباه درست کردید باید منو شما داری عرض و ارتفاع مشخصی باشد .
1- tage ul اول رو نبستید
2- برای نوشتن یک منوی خیلی ساده کلی javaScript نوشتید ... .
3- ...

یه نمونه کد خیلی ساده رو از منو برای شما آماده کردم که براتون میذارم ... :X


<html>
<head>
<style type="text/css">
* {
padding:0;
margin:0;
}
div.menu {
width:auto;
background-color:#3c6;
}
div.menu .sub {
clear:both;
}
div.menu ul {
margin:0px auto;
width:510px;
list-style:none;
}
div.menu li {
position:relative;
width:100px;
white-space:nowrap;
float:left;
border-left:1px solid white;
background-color:#009;
}
div.menu li:first-child {
border-left:none;
}
div.menu a {
text-decoration:none;
color:#FFF;
font-family:"Comic Sans MS", cursive;
font-size:18px;
display:block;
padding:10px 20px;
}
div.menu li:hover {
background-color:#093;
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

div.menu li li {
float:none;
border:1px solid white;
}
div.menu li ul {
display:none;
}
div.menu li:hover > ul {
position:absolute;
display:block;
z-index:2;
}
div.menu li li:hover ul {
left:100px;
top:-1px;
}
</style>
</head>

<body>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Contact1</a></li>
<li><a href="#">Contact2</a></li>
<li><a href="#">Contact3</a>
<ul>
<li><a href="#">1Contact3</a></li>
<li><a href="#">2Contact3</a></li>
<li><a href="#">3Contact3</a></li>
<li><a href="#">4Contact3</a></li>
</ul>
</li>
<li><a href="#">Contact4</a></li>
<li><a href="#">Contact5</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a>
<ul>
<li><a href="#">FAQ1</a></li>
<li><a href="#">FAQ2</a>
<ul>
<li><a href="#">1FAQ2</a></li>
<li><a href="#">2FAQ2</a>
<ul>
<li><a href="#">12FAQ2</a></li>
<li><a href="#">22FAQ2</a></li>
<li><a href="#">32FAQ2</a></li>
<li><a href="#">42FAQ2</a></li>
</ul>
</li>
<li><a href="#">3FAQ2</a></li>
<li><a href="#">4FAQ2</a></li>
</ul>
</li>
<li><a href="#">FAQ3</a></li>
<li><a href="#">FAQ4</a></li>
<li><a href="#">FAQ5</a></li>
</ul>
</li>
<li><a href="#">Service</a></li>
</ul>
<div class="sub"></div>
</div>
</body>
</html>
Dash mehdi
جمعه 05 خرداد 1391, 22:28 عصر
من این کد رو گذاشتم ولی خیلی بزرگ و بد فونت و رنگ بود.
لطفا کمی درستش کنید تشکر.
Dash mehdi
شنبه 06 خرداد 1391, 10:07 صبح
لطفا یه نفر کمک کنه ...
lady64
یک شنبه 07 خرداد 1391, 12:42 عصر
اگه از کد آقای gold استفاده کردید در کلاس div.menu a مقدار font-size رو مثلا بزارید 12px . نوع فونت رو هم از font-family تغییر بدید و رنگ رو هم با color در همون کلاس.
Saber Mogaddas
دوشنبه 08 خرداد 1391, 11:20 صبح
سلام


لطفا یه نفر کمک کنه ...

این یه نمونه از منو آبشاری هست که با جی کوئری بهش افکت دادم..این فقط یه نمونه هست و باید روش کار بشه..اسکلت و افکتش رو من براتون گذاشتم بقیه کارها با Css قابل حل هست..


دوستان سوال من خیلی سادست . فقط جوابشو نمیدونم !!! میخوام بین نوشته های منو ی افقیم خط عمودی ایجاد بشه

برای این کار من از background-image و background-position استفاده کردم..روش خوبی هست ..

87573

موفق باشید..
askari.khosravani
یک شنبه 14 خرداد 1391, 09:33 صبح
می تونید از نرم افزار Adobe Dreamweaver هم استفاده کنی هم به صورت عمومی و هم افقی به راحتی برات منو می سازه. از طریق spry menue
lady64
چهارشنبه 18 مرداد 1391, 16:37 عصر
سلام . در پست شماره ی 8 همین تاپیک که کد یک منو گذاشته شده میخوام یک منوی دیگه به منو ها اضافه کنم . مثلا search . ولی بهم میریزن و یکی از منو های به خط بعدی میره . خاصیت width کلاس منو و ul رو زیاد هم کردم اما تغییری نکرد . میشه بفرمائید کدوم آیتم رو تغییر بدم .
ممنونم
lady64
پنج شنبه 19 مرداد 1391, 08:15 صبح
کسی نظری نداره ؟ بنظرم ساده ست . فقط میخوام بدونم غیر از width چه تنظیمی نیازه که من انجام ندادم ؟
Saber Mogaddas
پنج شنبه 19 مرداد 1391, 10:32 صبح
سلام
اگه توجه کنید به تگ ul توسط select :

div.menu ul

عرض ثابت داده شده ..و ارتفاعی داده نشده و وقتی شما آیتم جدید به این منو اضافه می کنید از نظر عرض گنجایش نداره و به ارتفاع زور میاره و میندازه یک سط پایین که با زیاد کردن عرض ul مشکل حل میشه..ولی بهتر بود که به ul عرض داده نمیشد و مقدار width:auto دیو بالای ul حذف شده و با مقدار عرض متغیر این کار انجام میشد برای تعیین عرض متغییر نیز از min-width می تونید استفاده کنید ..و در نهایت همین دیو رو داخل دیو اصلی که wraper صفحه و وسط چین هست > margin:0 auto .. قرار داده و margin:auto لیست یا همان ul رو حذف کنید..

div.menu {
background-color: #33CC66;
min-width: 10px;
overflow: hidden;


}



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