[jQuery] horizontal accordion menu

구글 검색어: free horizontal accordion menu

검색 사이트:  jQuery Accordion Plugins and Tutorials

설명: http://www.designchemical.com/blog/index.php/jquery/jquery-simple-horizontal-accordion/

DEMO : http://www.designchemical.com/lab/jquery/demo/jquery_simple_horizontal_accordion.htm

1. HTML

<ul id="accordion">

      <li>

        <img src="images/section_1.png" />

        <strong>Section 1 Header</strong><br/>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.

      </li>

      <li>

        <img src="images/section_2.png" />

        <strong>Section 2 Header</strong><br/>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.

      </li>

      <li>

        <img src="images/section_3.png" />

        <strong>Section 3 Header</strong><br/>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.

      </li>

      <li>

        <img src="images/section_4.png" />

        <strong>Section 4 Header</strong><br/>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.

    </li>

  </ul>

2. CSS

#accordion {

list-style: none;

margin: 30px 0;

padding: 0;

height: 200px;

overflow: hidden;

background: #7d8d96;}

 

#accordion li {

float: left;

border-left:

display: block;

height: 170px;

width: 50px;

padding: 15px 0;

overflow: hidden;

color: #fff;

text-decoration: none;

font-size: 16px;

line-height: 1.5em;

border-left: 1px solid #fff;}

 

#accordion li img {

border: none;

border-right: 1px solid #fff;

float: left;

margin: -15px 15px 0 0;

}

 

#accordion li.active {

width: 450px;

}

3. JQuery

$(document).ready(function(){

 

    activeItem = $("#accordion li:first");

    $(activeItem).addClass('active');

 

    $("#accordion li").hover(function(){

        $(activeItem).animate({width: "50px"}, {duration:300, queue:false});

        $(this).animate({width: "450px"}, {duration:300, queue:false});

        activeItem = this;

    });

 

})

추가 참고: Custom Scrollbar

15+ jQuery Custom Scrollbar Plugins, Scripts and Tutorials

Demo (배경 이미지를 넣은 Scrollbar) : http://demos.myjqueryplugins.com/jscrollbar/

Demo : http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html