سوال: طراحی منو با css [بایگانی]

gandom66

یک شنبه 11 اسفند 1392, 15:32 عصر

سلام
دوستان میخوام یه منو مثل منوی این سایت در بیارم http://www.autodesk.comکه وقتی با موس روش کلیک کنی باز بشه و اجزای زیریش رو هل بده پایین
اومدم این کدو گذاشتم
<style type="text/css">

p.item {
text-align:center;
padding-top:5px;
float:left;
border:solid 1px yellow;
width:100px;
height:30px;
background:red;
transition-property: background-color,color,transform,width,height;
transition-duration: 2s;
-webkit-transition-property: background-color,color,transform,width,height; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
}

</style>

<div>

<div style="height:auto">
<p class="item">
<a onclick="document.getElementById('tradeDetailsSelector').st yle.display='';return false;"

href="#" style="text-decoration: none; border-bottom: 1px dotted blue;" class="TradeDetailsLink" >

Home
</a>

</p>

<div id="tradeDetailsSelector" class="ContextMenuPanel" style="display: none;height:auto;background-color:yellow;">

<div id="backlogin">

<a onclick="document.getElementById('tradeDetailsSelector').st yle.display='none';return false;"

href="#" style="text-decoration: none; border-bottom: 1px dotted blue;padding:10px;">
<img src="../Images/site/close.png" alt="خروج" title="خروج" />
</a>

</div>

</div>

</div>

<div style="height:auto">
<p class="item">
<a onclick="document.getElementById('tradeDetailsSelector2').s tyle.display='';return false;"

href="#" style="text-decoration: none; border-bottom: 1px dotted blue;" class="TradeDetailsLink" >

Gallery
</a>

</p>

<div id="tradeDetailsSelector2" class="ContextMenuPanel" style="display: none;height:auto;background-color:yellow;">

<div id="backlogin2">

<a onclick="document.getElementById('tradeDetailsSelector2').s tyle.display='none';return false;"

href="#" style="text-decoration: none; border-bottom: 1px dotted blue;padding:10px;">
<img src="../Images/site/close.png" alt="خروج" title="خروج" />
</a>

</div>

</div>

</div>

</div>

ولی خروجی اینی ک میخوام نمیشه

میشه کمک کنید و کاملش کنیم ممنون میشم

p30online

یک شنبه 11 اسفند 1392, 22:05 عصر

منوها جالبی این وب سایت داره مشاهده (http://cssmenumaker.com/)

gandom66

سه شنبه 13 اسفند 1392, 11:41 صبح

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

http://www.impressivewebs.com/mega-menus-ajax-jquery

akbarkani

چهارشنبه 14 اسفند 1392, 18:04 عصر

سلام عزیزم اگر میخوای منوی آبشاری درست کنی باید با j_query اشنا باشی البته با CSS و تگهای <ul> , <li> میتونی این کارهارو انجام بدی ولی خیلی خشک و بی انعطاف ،حالا شما به این صورت که میگم عمل کن ابتدا کدهای زیر رو با پسوند .js ذخیره کن:

// JavaScript Document

$(document).ready(function(){
$('ul.u1').hide();
$('li.mainmenu').hover(
function() {
$('ul', this).show('slow');},
function(){
$('ul',this).hide();})

});

سپس کدهای زیر را بصورت css:

@charset "utf-8";

/* CSS Document */
body{margin:0; padding:0;}
.mainmenu{
float:left;
margin-right:25px;
width:150px;
list-style-type:none;
}
li.mainmenu ul{
list-style-type:none;
margin:0;
padding:0;
}
a{
text-decoration:none;
width:150px;
background-color:#03F;
color:#FFF;
font-size:16px;
display:block;
padding:.5em;
border-bottom:1px #CCC solid;
}
ul#dropdownmenu li a:hover{ background-color:#000; font-weight:bold;}
/*#dropdownmenu{margin:0; padding:0;}*/

و کدهای زیر رو بصورت html ذخیره کن:

<!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>5-6. Creating Two Menus with Separate Menu Items</title>
<script type="text/javascript" src="../../../J-Query/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="nav5.js"></script>
<link type="text/css" href="nav5.css" rel="stylesheet" />
</head>

<body>
<h2>5-6. Creating Two Menus with Separate Menu Items</h2>
<ul id="dropdownmenu">
<li class="mainmenu">
<a href="#">Books</a>
<ul class="u1">
<li><a href="#">Web Development</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">RDBMS</a></li>
</ul>
</li>
<li class="mainmenu">
<a href="#">Movies</a>
<ul class="u1">
<li><a href="#">Latest Movie Trailers</a></li>
<li><a href="#">Movie Reviews</a></li>
<li><a href="#">Celebrity Interviews</a></li>
</ul>
</li>
</ul>
</body> </html>

فقط بجای این ادرس:<script type="text/javascript" src="../../../J-Query/jquery-1.9.1.min.js"></script>

باید
jquery-1.9.1.min.js دانلود بشه و هموشون رو در یک فایل قراربدی؛
در این صورت ادرس میشه
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>

اینم ادرسشhttp://code.jquery.com/jquery-1.9.1.js