Menu obraz w jQuery



Witam wszystkich w Nowym Roku!

A jak Nowy Rok to nowa dawka porad z zakresu jQuery. Dzisiaj przedstawię prosty sposób na obrazowe menu w jQuery.

jquery_8

ZOBACZ DEMO

Zacznijmy od kodu HTML,

<div class="jimgMenu">
  <ul>
    <li class="landscapes"><a href="#">Landscapes</a></li>
    <li class="people"><a href="#">People</a></li>
    <li class="nature"><a href="#">Nature</a></li>
    <li class="abstract"><a href="#">Abstract</a></li>
    <li class="urban"><a href="#">Urban</a></li>
  </ul>
</div>

Do tego oczywiście CSS:

.jimgMenu {
        position: relative;
        width: 670px;
        height: 200px;
        overflow: hidden; 
        margin: 25px 0px 0px;
}
.jimgMenu ul {
        list-style: none;
        margin: 0px;
        display: block;
        height: 200px;
        width: 1340px;
}
.jimgMenu ul li {
        float: left;
}
.jimgMenu ul li a {
        text-indent: -1000px;
        background:#FFFFFF none repeat scroll 0%;
        border-right: 2px solid #fff;
        cursor:pointer;
        display:block;
        overflow:hidden;
        width:78px;
        height: 200px;
}
.jimgMenu ul li.landscapes a {
        background: url(images/landscapes.jpg) repeat scroll 0%;
}
.jimgMenu ul li.people a {
        background: url(images/people.jpg) repeat scroll 0%;
}
.jimgMenu ul li.nature a {
        background: url(images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
        background: url(images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
        background: url(images/urban.jpg) repeat scroll 0%;
        min-width:310px;
}

Gotowe!

Powodzenia!

Źródło: Alohatechsupport.net

1 komentarz

  1. Bardzo fajne i użyteczne, myślę iż taki rodzaj pokazu zdjęć jest coraz popularniejszy na nowoczesnych stronach internetowych

    strony internetowe

    2011.01.14
    14:11