CSS3 Sliding Menus

Sliding menu with rotating text using CSS3 and jquery

HTML

<div class="outer">
    <h2>Scenic</h2>
    <ul id="menu">
        <li>
            <p>Deep.Valley</p>
            <img width="660" src="http://filmgippsland.com.au/database/films/1264419826image_lg_omeo-for-suzuki.jpg" />
        </li>
        <li>
            <p>Grazing.Cows</p>
            <img width="660" src="http://www.filmnortheastvictoria.com.au/database/towns/1262932116image_lg_mansfield.jpg" />
        </li>
        <li>
            <p>Rocky.Shore</p>
            <img width="660" src="http://filmgippsland.com.au/database/towns/1263817766image_lg_wilsons-prom-national-park.jpg" />
        </li>
        <li>
            <p>Tree.Lined.Roads</p>
            <img width="660" src="http://www.filmnortheastvictoria.com.au/database/towns/1263381993image_lg_marysville.jpg" />
        </li>
        <li>
            <p>Top.Of.the.World</p>
            <img width="660" src="http://www.go2borneo.com/system/image/header/mt-kinabalu.jpg" />
        </li>
        
    </ul>
    <div style="clear:both;"></div>
</div> WebRep
Συνολική αξιολόγηση
Η ιστοσελίδα δεν έχει αξιολόγηση
(χωρίς αρκετές ψήφους)

CSS

body {
    font-family: arial;
}
h2{
    color: #999;
}
.outer{
    width: 740px;
    margin: 0 auto;
}
#menu{
    margin: 0;padding: 0;
}
#menu li,
#menu:hover li:last-child {
    float: left;
    list-style: none;margin: 0;
    height: 220px;
    width: 30px;  
    overflow: hidden;
    position: relative;
}
#menu img{
    position: absolute;
    top: 3px; left: 3px;
}
#menu p,
#menu:hover li:last-child p{
    cursor: pointer;
    color: #eee;
    text-shadow: 4px 4px 4px #000;
    position: absolute;
    z-index: 2;
    bottom: 10px; left: 10px;
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);    
}
#menu li:hover,
#menu li:last-child,
#menu:hover li:last-child:hover{
    width: 600px;
}

#menu li:hover p,
#menu li:last-child p,
#menu:hover li:last-child:hover p{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

#menu li p,
#menu li {
    -webkit-transform-origin: 10%;
    -o-transform-origin: 10%;
    -moz-transform-origin: 10%;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
}     WebRep
Συνολική αξιολόγηση
Η ιστοσελίδα δεν έχει αξιολόγηση
(χωρίς αρκετές ψήφους)

JavaScript

// Original: http://jsfiddle.net/nimbu/c474T/ WebRep
Συνολική αξιολόγηση
Η ιστοσελίδα δεν έχει αξιολόγηση
(χωρίς αρκετές ψήφους)