ایجاد هدر متحرک با جی کوئری

neginalmasi · اسفند 92

با عرض سلام و خسته نباشید خدمت اساتید محترم

من یک هدر طراحی کردم که مخفی است و با کلیک برروی نوشته ظاهر میشه ولی اشکال من در قسمت مثلث کوچیکه

این عکس قبل از کلیک:

این عکس هم بعد از کلیک

ولی بعد دیگه مثلث تغییر نمی کنه من در مرود نوشتن کدهای جی کوئری مبتدیم ولی کداش رو اینجوری نوشتم :


<script type="text/javascript">
$(function() {
$('.top_menu').hide();
$('.top_headerClosebtn').click(function() {
$('.top_menu').toggle(1000);
$(this).find('a').css('background','url(<?php bloginfo('template_url'); ?>/images/toparrow2.png) no-repeat 100% 5px');
});
});
</script>

می خواستم در مورد نوشتن اون قسمتش راهنماییم کنید .

neginalmasi · اسفند 92

این کد های html منه :


<script type="text/javascript">
$(function() {
    $('.top_menu').hide();
    $('.top_headerClosebtn').click(function() {

	    $('.top_menu').toggle(1000);
	    $(this).find('a').css('background','url(<?php bloginfo('template_url'); ?>/images/toparrow2.png) no-repeat 100% 5px');

    });
});
</script>


<?php wp_head(); ?>
</head>
<body>
<!--header -->
<div class="top_header">
	  <div style="margin-top: 0px;" class="top_headerlin">
		 <div class="top_menu">
			 <ul>
			    <li><a href="#">ADSLتعرفه</a></li>
			    <li><a href="#">فروش کامپیوتر</a></li>
			    <li><a href="#">SMSانبوه</a></li>
			    <li><a href="#">CRM</a></li>
		    </ul>
	    </div>

	 </div>
	 <div class="top_headerHolder">
		 <span class="top_headerClosebtn">
			 <a style="background: url('<?php bloginfo('template_directory'); ?>/images/toparrow.png') no-repeat scroll 100% 5px		 transparent;" href="#">انتخاب های برتر</a>
	    </span>
	 </div>
</div>
<div id="box"></div>
</body>
</html>

اینم کد css


.top_headerClosebtn
{
    position:absolute;
    right:50px;
    bottom:-38px;
    background:url(images/topclosebutton.png) no-repeat 0 0;
    width:298px;
    height:47px;
    z-index:1;
}
.top_headerClosebtn a
{
    color:#3f618e;
    font:normal 11px Tahoma, Arial, Calibri;
    background:url(images/toparrow.png) no-repeat 100% 5px;
    padding-right:15px;
    display:inline-block;
    margin:20px 0 0 120px;
    text-decoration:none;

}

Farid · اسفند 92

بفرمایید »

http://codepen.io/fa...asemi/pen/lHfoe

فقط جای عکس + و ضربدر رو عکسای خودتون بذارید و بقیه ی کلاس ها رو بهش بدید مثل بکگراند منو و ...

neginalmasi · اسفند 92

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

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

Farid · اسفند 92

jquery.com منبع اصلی هست ولی آموزش های زیادی هم در نت موجوده

neginalmasi · اسفند 92

با سلام مجدد

من برای همان سایتم که هدر متحرک استفاده کردم از یک اسلایدر جی کوئری برای بخش خبر می خوام استفاده کنم

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

jQuery.noConflict();

و همچنین به جای $ ازjQuery استفاده کردم ولی بازم مشکلم حل نشد

اسلایدری که استفاده کردم اینه

نمی دونم از کدوم کتابخانه جی کوئری استفاده کنم که هردوتاش هم کار کنه؟

neginalmasi · اسفند 92

وای خدای من مشکلم حل شد :lol:

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

http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page

neginalmasi · اسفند 92

نمی دونم تو همین تاپیک باز سوال می کردم یا نه ؟

من برای فوترم هم از روش هدر متحرک استفاده کردم ولی وقتی روی فوتر کلیک می کنم که فوتر هم باز بشه

فوتر باز میشه ولی مثل این می مونه که به وسط سایت می پره فکر کنم باید برای تنظیم ارتفاعاشون هم جی کوئری بنویسم یا نه؟

کد هایی که نوشتم اینا هستند:

جی کوئری هاش :


<script type="text/javascript">
				 var $k = jQuery.noConflict();
				$k(document).ready(function(){

				  var $kcontent = $k(".footer_center").hide();
				  $k(".footertoggle").on("click", function(e){
				$k(this).toggleClass("expanded2");
				$kcontent.slideToggle(800);
					  });
				});
				</script>

کد اصلیش :

<div id="footer">

	 <div class="footer_holder">
		<span class="footerEcBtn">
			 <a href="#" class="footertoggle">مواردبیشتر</a>
		  </span>
		<div class="bottom_footer">
			<span>
			Copyright © 2014
			</span>
		</div>
	</div><!--footer_holder-->
	<div class="clear"></div>
	<div class="footer_lin" style="margin-top:0px;">
	<div class="footer_center" style="position:relative;">

	</div>
	</div>
</div><!--footer-->

Farid · فروردین 93

سوال جدید در تاپیک جدید مطرح کنید

ورود

ایجاد هدر متحرک با جی کوئری

پست های پیشنهاد شده

neginalmasi 16

لینک به ارسال

neginalmasi 16

لینک به ارسال

Farid 2281

لینک به ارسال

neginalmasi 16

لینک به ارسال

Farid 2281

لینک به ارسال

neginalmasi 16

لینک به ارسال

neginalmasi 16

لینک به ارسال

neginalmasi 16

لینک به ارسال

Farid 2281

لینک به ارسال

به گفتگو بپیوندید

فهرست بخش ها

فعالیت ها