+- پارس جوم :: انجمن های تخصصی جوملا (https://forums.parsjoom.ir)
+-- انجمن: پشتیبانی (/forum-70.html)
+--- انجمن: مباحث و مشکلات عمومی (/forum-33.html)
+--- موضوع: جابجایی منو ها در صفحه اینترو (/thread-15533.html)
جابجایی منو ها در صفحه اینترو - fidoman - ۱۶-۴-۱۳۹۳ ۰۱:۱۵ صبح
سلام دوستان من یه صفحه اینترو رو بومی کردم برای کارم ولی یه قسمت رو نتونستم انجامش بدم
اونم بردن منو ها از سمت چپ به وسط صفحه است
تصویر رو میزارم به همراه کد ایندکس اش
ممنون میشم راهنمایی بفرمایید
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>صفحه رسمی شرکت پیام صبا در ایران</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
<meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
body{
background:#333 url(bg.jpg) repeat top center;
font-family:tohoma;
}
span.reference{
position:fixed;
left:20px;
bottom:20px;
font-size:16px;
}
span.reference a{
color:#aaa;
text-transform:uppercase;
text-decoration:none;
text-shadow:1px 1px 1px #000;
margin-right:30px;
}
span.reference a:hover{
color:#ddd;
}
ul.sdt_menu{
margin-top:150px;
}
h1.title{
text-indent:-9000px;
background:transparent url(title.png) no-repeat top center;
width:633px;
height:69px;
}
</style>
</head>
<body>
<div class="content">
<h1 class="title">صفحه رسمی شرکت پیام صبا در ایران </h1>
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="www.payamsaba.ir">
<img src="images/2.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">خدمات وب</span>
<span class="sdt_descr">web services</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">فروشگاه اینترنتی</span>
<span class="sdt_descr">Online Shop</span>
</span>
</a>
<div class="sdt_box">
<a href="#">محصولات ورزشی</a>
<a href="#">محصولات بهداشتی</a>
<a href="#">فروش کتاب </a>
</div>
</li>
<li>
<a href="#">
<img src="images/3.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">شبکه تجارت پیام</span>
<span class="sdt_descr">Business Network payam</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/4.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">نمایشگاه حیوانات </span>
<span class="sdt_descr">pets Fairs</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/5.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">خدمات گرافیکی</span>
<span class="sdt_descr">Graphic Services</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">شبکه ورزش</span>
<span class="sdt_descr">Sports Network</span>
</span>
</a>
<div class="sdt_box">
<a href="#">تیم تحقیقات ورزشی</a>
<a href="#">انجمن ورزش های تخصصی</a>
<a href="#">کلوپ ورزشکاران</a>
</div>
</li>
</ul>
</div>
<div>
<span class="reference">
طراحی شده توسط :
: <a href="http://www.payamsaba.ir/" title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library">شرکت پیام صبا </a>
</span>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>
</body>
</html>RE: جابجایی منو ها در صفحه اینترو - sajjad salehi - ۱۶-۴-۱۳۹۳ ۰۲:۳۲ صبح
معمولا با margin-left: auto و margin-right: auto انجام میدن ولی معلوم نیست که توی تموم مرورگرها جواب بده . استفاده از درصد % هم خوبه مثلا وسط 60% چپ و راست هر کدوم 20% ماریجن .
کلن روش دقیق و ثابتی وجود نداره با پدینگ و مارجین سعی کن تقریبا بیاریش وسط .