Slide Şeklinde Resimli Menusü Yapımı

Slide Şeklinde Resimli Menusü Yapımı

demosu

https://codepen.io/bloggeriz/pen/qBWVjGr

<div class='slideOuter'>

<ul class='slide current'>
<li><a href='#url1' id='p1'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1A_YGdd-8L9NcsANMhYpYCmUf2O6vii-MTqVFNWrgyg_Ju-_d7bQUfRxOR4ZEwBKRNUPcGKfHpBVNTSB-UTGiE_G6iPEQpNVzEFj6fhZ7jGvkFTQNsBBatbQhVI8A8B4GiKiuCfB3tHmU/s1600/landscape.jpg'/></a></li>
<li><a class='current' href='#url2' id='p2'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Km18P-K1TNdiKEje1qG7u5SJWKs2zZ4nh3vUu6XMJcSR-S9qhC8JFtVIgRU34ExQQXwr2YS3OaiMvNAZnHOr9P9TQdtm6k966htz5BIqpxNahaMZtegjVLe03xrhxHXd_EDyvtReCuOH/s1600/portrait.jpg'/></a></li>
<li><a href='#url3' id='p3'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbKafRiMrv_3fTP2OvPqGwIFgPUy1MBcF-Tgd9yc625fK0JBO9lnzaoaJyk973gdqSPhMx26Sq068paHrZ0MuWlRdE6NM7M6Zz7klzpjUL0q01ddN-uFXo_3cOgg2RBJc-GCdVup1AfhTq/s1600/flower.jpg'/></a></li>
<li><a href='#url4' id='p4'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEhcdZRCfHy0hj47SDeYAO-f4Mh0zh3vSM7CObXZwNOZXS2H4q55JDvT_itrxFKM-FiFwNiTx6XobzpHjclQhXav6N45jH7cOI2cqM8JaZj71tMCWhrzu3xMt2Hp7JyhbsCbP53nZ9A1Er/s1600/abstract.jpg'/></a></li>
<li><a href='#url5' id='p5'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZsRIe0j9bllXG-63EvMit6arLkk0aMZp5hgTx7k_zg2niDhIKj750guuplK2sujXSBCW1hZGzOtNOczQya3vGa8bT_opuGTmngJw0BHbpZDi1yBxE9pbC8-YcaBaHhyzDz2uDoV2MND5_/s1600/seascape.jpg'/></a></li>
</ul>
</div>

css kodları

.slideOuter {width:700px; height:200px; overflow:hidden; margin:0 auto;} .slideOuter .slide {padding:0; margin:0; list-style:none; width:700px; height:200px; overflow:hidden;} .slideOuter .slide li {float:left;} .slideOuter .slide li a {display:block; float:left; width:98px; border-right:2px solid #fff; height:300px; overflow:hidden; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .slideOuter .slide a#p5 {width:318px;} .slideOuter .slide.current a {width:43px;} .slideOuter .slide.current li a.current {width:318px;} .slideOuter .slide li a img {border:0;} .slideOuter .slide:hover a#p1, .slideOuter .slide:hover a#p2, .slideOuter .slide:hover a#p3, .slideOuter .slide:hover a#p4 {width:43px;} .slideOuter .slide a#p1:hover, .slideOuter .slide a#p2:hover, .slideOuter .slide a#p3:hover, .slideOuter .slide a#p4:hover {width:318px;}