-1

過去数日間解決しようとしてきた興味深い問題があります。2番目のナビゲーションメニューを作成し、次のコードをcustom_functions.phpに追加して、Thesis1.8.5のサイドバーに追加しました。

/* Add second menu to sidebar 1*/
register_nav_menu('secondary', 'Secondary Menu');
function secondary_menu() {
wp_nav_menu( array( 'container_class' => 'secondary_menu', 'theme_location' => 'secondary'        ) );
}
add_action('thesis_hook_before_sidebar_1','secondary_menu');

次に、このcssをcustom.cssに追加して、メニュー項目のアイコンを作成しました。

/* Menu Container */
.custom .sidebar .menu {
  list-style: none;
  padding: 0;
  margin: 0 0 0 10px;
  width: 190px;
  height: 190px;
  position: relative;
}

/* Submenu Container */
.custom .sidebar .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 190px;
  height: 45px;
  position: relative;
}
/* Facebook */
.custom #menu-item-15470 a {
    display:block;
    height:81px;
    width:80px;
    padding:0px;
    margin-left:0px;
    position: relative;
    left: 0px;
    top: 0px;
    outline:none;
    text-indent:-9999px;
    background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0 0px;
}
.custom #menu-item-15470 a:hover { 
    background-position:-83px 0; 
}

/* Pinterest */
.custom #menu-item-15471 a {
    display:block;
    height:81px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 91px;
top: -81px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -82px;
}
.custom #menu-item-15471 a:hover { 
background-position:-83px -82px; 
}

/* Instagram */
.custom #menu-item-15472 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 0px;
top: -71px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -165px;
}
.custom #menu-item-15472 a:hover { 
background-position:-83px -165px; 
}

/* Instagram Submenu Janae */
.custom #menu-item-15473 a {
display:block;
height:42px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 1px;
top: -72px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -331px;
}
.custom #menu-item-15473 a:hover { 
position: relative;
left: 1px;
top: -72px;
background-position:-83px -331px; 
}

/* Instagram Submenu Billy */
.custom #menu-item-15478 a {
display:block;
height:42px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 1px;
top: -75px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -374px;
}
.custom #menu-item-15478 a:hover { 
background-position:-83px -374px; 
}

/* Twitter */
.custom #menu-item-15475 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 91px;
top: -197px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -248px;
}
.custom #menu-item-15475 a:hover { 
background-position:-83px -248px; 
}

/* Twitter Submenu Janae*/
.custom #menu-item-15476 a {
display:block;
height:42px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 92px;
top: -198px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -417px;
}
.custom #menu-item-15476 a:hover { 
background-position:-83px -417px; 
}

/* Twitter Submenu Billy*/
.custom #menu-item-15479 a {
display:block;
height:42px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 92px;
top: -201px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -460px;
}
.custom #menu-item-15479 a:hover { 
background-position:-83px -460px; 
}

メニューアイコンはすべてのブラウザ（モバイルクロームを含む）で正しく表示されますが、モバイルサファリ（リンクだけが表示される）では表示されません。

どのように見えるか：

http://farm9.staticflickr.com/8220/8340444170_7db7385bab_b.jpg

モバイルサファリでどのように見えるか：

http://farm9.staticflickr.com/8072/8339388111_7bdc6f50a9_b.jpg

私が取り組んでいるブログは、自分でチェックしたい場合はwww.hungryrunnergirl.comです。

どんな助けでもいただければ幸いです。ありがとうございました

4

1 に答える 1

0

正常に動作しているようです。私はiOSシミュレーター（公式のAppleツール）を使用しています。iPhoneとiPadの両方を試しました。キャッシュの問題が発生していますか？

于 2013-01-04T02:39:29.307 に答える