jQuery - Как я могу создать изображение стрелки индикатора подменю с моим кодом меню (также используя cufon)? - PullRequest
Новая
       25

jQuery - Как я могу создать изображение стрелки индикатора подменю с моим кодом меню (также используя cufon)?

1 голос
/ 01 марта 2012

Я хочу добавить стрелку только к ссылкам меню, которые содержат подменю. Я хочу, чтобы изображение обычно отображалось в виде стрелки вниз, а затем при наведении курсора на изображение со стрелкой вверх.

Мне удалось получить символ "+" для отображения только в меню с подменю, но я не уверен, как обращаться с частью изменения при наведении курсора или как добавить изображение вместо текстового символа.

HTML: 

<div id="menu">
    <ul class="topnav">
      <li><a href="index.html"><img src="images/home.gif" width="75" height="50" alt="Home Page" /></a></li>
      <li><h6><a href="services.html">Top Menu</a></h6>to help you
        <ul class="subnav">
            <li><a href="link.html">Link</a></li>
            <li><a href="link2.html">Link2</a></li>
        </ul>
      </li>
   </ul>

JQuery: 

//menu sub navigation
$(document).ready(function(){


$("#menu ul li h6").hover(function() { //When trigger is hovered...

    //Following events are applied to the subnav itself (moving subnav up and down)

    $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

    $(this).parent().hover(function() {
    }, function(){  
        $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
    });


    //Following events are applied to the trigger (Hover events for the trigger)
    }).hover(function() { 
        $(this).addClass("subhover"); //On hover over, add class "subhover"
    }, function(){  //On Hover Out
        $(this).removeClass("subhover"); //On hover out, remove class "subhover"
});

});

CSS: 

#menu ul { height:50px; color:#FFF; }
#menu ul li { float:left; padding: 0 36px 0 0; position: relative;  }

#menu li ul.subnav { position: absolute; left: 0; top: 44px; background-     color:#505050;     
margin: 0; padding:0; display: none; float: left; width: 120px; z-index:100;  -moz-border-radius-bottomleft:8px; -moz-border-radius-bottomright:8px; -webkit-border-  bottom-left-radius:8px; -webkit-border-bottom-right-radius:8px; border-top:none; border-bottom:1px solid #444444; border-left:1px solid #444444; border-right:1px solid #444444; height:auto; }
#menu li ul.subnav li { margin: 0; padding: 0; clear: both; width: 120px; z-index:5; border-top:1px solid #444444; }
#menu li ul.subnav li a { margin: 0; padding: 0 10px; float: left; width: 120px; z-index:135; line-height:30px; text-align:left; }
#menu li.current li a { color:#3f3f3f; }

.width_280 { width:280px; }
.margin_0_20_0_0 { margin:0 20px 0 0; }

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 01 марта 2012

Я думаю, что самым традиционным ответом на это является создание маленьких треугольников в разных ориентациях, которые вы хотите.Затем вы можете включить их в пункты меню, сделав их фоновыми изображениями, такими как: 

.menu_item {
  padding-left: 20px; /* make room for image */
  background: left middle url(triangle.png) no-repeat;
}

Затем, как вы делаете, применять классы, когда меню «открыто», и использовать CSS для измененияизображение.Может быть: 

.subhover .menu_item {
  background: left middle url(other_triangle.png) no-repeat;
}

Это основы ... Вы также можете создавать анимацию между состояниями, спрайтовать изображения, строить треугольники с помощью CSS ...

...