1

ウィジェット エリアのリンクに簡単なロール オーバーを作成しました (その部分を行う方法がわからないため、現時点では重要ではありません) これを作成しているサイトは www.avuedesigns.com/new にあります。バナー コンテンツ ボックス、これがその領域のそれであってほしいと思います。

これは私が思いついたものです http://jsfiddle.net/paDmg/368/

だから私の質問は、これはその領域で機能しますか（実行に関して）、または別の方法を試しますか?.

また、これをワードプレスのウィジェットにして、その領域に配置するのは簡単でしょうか? 私たちの php 担当者は 2 週間休暇を取っており、自分でプロジェクトを完成させようとしています。私はそれを理解できると確信しています。メソッドの方向を示す必要があるだけです。

もう一度ここにロールオーバーがあります: http://jsfiddle.net/paDmg/368/

こちらにもコピペ。

CSS

ul#hover-grid {
 padding: 0;
 list-style: none;
 margin: 0px auto 0;
 margin-top: 0;
 width: 220px;  
 }

#hover-grid li {
 float: left;
 padding: 2;
 margin: 0 1px 1px 1px;
 } 

#hover-grid .indiv-cell {
 width: 65px;
 height: 65px;
}

</p>

HTML

 <ul id="hover-grid">


<li class="indiv-cell"><a href="#"><img data-replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/1.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>

 <li class="indiv-cell"><a href="#"><img data-replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/2.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>

 <li class="indiv-cell"><a href="#"><img data-replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/3.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>

 <li class="indiv-cell"><a href="#"><img data-  replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/4.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>

 <li class="indiv-cell"><a href="#"><img data-replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/1.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>

 <li class="indiv-cell"><a href="#"><img data-replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/2.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>


            </ul>​

Javascript

$('#hover-grid .indiv-cell').hover(function() {

//set variables to current cell attributes
var cellHeader = $(this).attr('data-hoverheader');
var cellText = $(this).attr('data-hovertext');
var replacementImg = $(this).find('a img').attr('data-replacementimg');
var oringinalImg = $(this).find('a img').attr('src');

//save original image to data variable
$(this).data('origImg', oringinalImg);



//add remove classes
$('#hover-grid .indiv-cell').removeClass('newClass');
$(this).addClass('newClass', 1000);
$(this).find('a img').hide().attr('src', replacementImg).fadeIn(300);
$('.master-cell h1').hide().text(cellHeader).fadeIn(300);
$('.master-cell p').hide().text(cellText).fadeIn(300);


//return false;
}, function() {
$(this).find('a img').hide().attr('src', $(this).data('origImg')).fadeIn(10);
});​
4

1 に答える 1

0

HTMLを動的なナビゲーションメニューに変えたいと思いますよね？Wordpress codexには、このための設定があり、メニューを html に一致するように構成できます。

このような設定で始めることができると思います

<?php $defaults = array(
'theme_location'  => 'custom-menu',
'container'       => 'div', 
'menu_class'      => 'indiv-cell', 
'echo'            => true,
'fallback_cb'     => 'wp_page_menu',
'items_wrap'      => '<ul id="hover-grid">%2$s</ul>',
); ?>

<?php wp_nav_menu( $defaults ); ?>
于 2012-09-27T23:51:29.883 に答える