PDA

View Full Version : اموزش مرحله به مرحله ساخت منو(وجدانا هنوز خوب یاد نگرفتم)


omid_student
پنج شنبه 24 مرداد 1392, 11:03 صبح
دوستان شرمنده که این پست رو فرستادم
متاسفانه مغذم هنگ کرده نمیتونم متوجه شم
دوستان اکه کسی هست خوب توضیح بده تا یاد بگیرم
سپاسگذارم
tadayoni
پنج شنبه 24 مرداد 1392, 11:27 صبح
منوی vertical میخوای یا horizantal ?
omid_student
پنج شنبه 24 مرداد 1392, 11:32 صبح
فعلا عمودی رو بگین چون یه سری تگ ها رو عوض کنی میشه افقی
meysam1366
پنج شنبه 24 مرداد 1392, 12:18 عصر
فعلا عمودی رو بگین چون یه سری تگ ها رو عوض کنی میشه افقی

سلام دوست عزیز

کار خاصی نداره

ببینید شما اولین کاری که می کنید یک دایو ایجاد می کنید

مثل این



<div class="menu">

</div>


بعدش داخل دایو یه لیست ایجاد می کنیم

مثل این



<div class="menu">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>


بعدش به لیست اسم موردنظر رو اضافه می کنیم

مثل این



<div class="menu">
<ul>
<li>home</li>
<li>contact</li>
<li>about</li>
</ul>
</div>


بعدش هم به کارمون استایل میدیم
meysam1366
پنج شنبه 24 مرداد 1392, 13:15 عصر
فعلا عمودی رو بگین چون یه سری تگ ها رو عوض کنی میشه افقی


سلام مجدد

دوست عزیز ببینید این منو رو من قبلا درست کردم خیلی سادست راحت میتونی سر در بیاری


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

.menu
{
text-align:right;
float:right;
background-color: peru;
width: 600px;
height: 35px;
}

.menu ul
{
list-style-type:none;
position: relative;
}

.menu li a
{

text-decoration: none;

}

.menu li
{
list-style: none;
float: right;
position: relative;
margin-right: 10px;
margin-top: -7px;
width: 70px;
height: 20px;
font-weight: bold;
color: #f7f7f7;
text-align: center;

}

.menu li:hover
{
width: 70px;
height: 20px;
background-color: white;

}

.search {
float: left;
margin-left: 15px;
margin-top: -8px;
}


</style>
<meta charset="utf-8" />
</head>

<body>
<div class="header">

</div>
<div class="menu">
<ul>
<li><a href="default.asp">صفحه صلی</a></li>
<li><a href="news.asp">درباره ما</a></li>
<li><a href="contact.asp">تماس با ما</a></li>
</ul>
<div class="search">
<form id="btsearch">
<input type="search" value="search..." name="search" />
</form>
</div>
</div>

</body>
</html>
refugee
پنج شنبه 24 مرداد 1392, 15:48 عصر
حالا اگه اومدیم و منوی کشویی داشتیم چیکار کنیم میثم ؟

اونم اموزش بده , با سی اس اس و جاوا
webtracker
پنج شنبه 24 مرداد 1392, 18:45 عصر
دوست عزیز می تونی از سایت های که منو ساز هستند استفاده کنید مثلا در سایت http://cssmenumaker.com یکی از منو های موجود که همون شکل ها هستن رو انتخاب می کنی و همچنین می تونی نوعش رو که flyout یا vertical یا .. انتخاب کنی وقتی منوی مورد نظر بامشکل مطلوب رو انتخاب کردی سه گزینه می ده که با زدن build می تونی وارد قسمت ساخت منو بشی و یک کار کردن منوی خود رو به صورت ویژال بسازی و در آخر بازدن دانلود کدش رو بگیری
meysam1366
پنج شنبه 24 مرداد 1392, 21:33 عصر
دوست عزیز می تونی از سایت های که منو ساز هستند استفاده کنید مثلا در سایت http://cssmenumaker.com یکی از منو های موجود که همون شکل ها هستن رو انتخاب می کنی و همچنین می تونی نوعش رو که flyout یا vertical یا .. انتخاب کنی وقتی منوی مورد نظر بامشکل مطلوب رو انتخاب کردی سه گزینه می ده که با زدن build می تونی وارد قسمت ساخت منو بشی و یک کار کردن منوی خود رو به صورت ویژال بسازی و در آخر بازدن دانلود کدش رو بگیری

سلام دوست عزیز

از راهنمایی شما سپاسگذارم ولی هیچوقت به این صورت دوستان رو راهنمایی نکنید هیچ چیزی بهتر از نوشتن کد توسط خود شخص نیست که باعث میشه بهتر یاد بگیرن مخصوصا دوستانی که مبتدی

هستند

موفق باشید
meysam1366
پنج شنبه 24 مرداد 1392, 21:35 عصر
حالا اگه اومدیم و منوی کشویی داشتیم چیکار کنیم میثم ؟

اونم اموزش بده , با سی اس اس و جاوا

سلام دوست عزیز

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

موفق باشید
meysam1366
پنج شنبه 24 مرداد 1392, 22:05 عصر
نمونه منوی کشویی با جی کوئری



<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Menu - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}

.ui-menu {
width: 150px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>
<li><a href="#">Addyston</a></li>
<li>
<a href="#">Delphi</a>
<ul>
<li class="ui-state-disabled"><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li><a href="#">Saarland</a></li>
<li>
<a href="#">Salzburg</a>
<ul>
<li>
<a href="#">Delphi</a>
<ul>
<li><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li>
<a href="#">Delphi</a>
<ul>
<li><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li><a href="#">Perch</a></li>
</ul>
</li>
<li class="ui-state-disabled"><a href="#">Amesville</a></li>
</ul>
</body>
</html>


منبع (http://jqueryui.com/menu/)