SPSTRAP Document API

Dropdown

Float Left

<div class="[sp--dropdown]" 
                                effect="slideup"
                                layer="lg-light-outline"
                            >
                                <ul>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="gray">BEST</a>
                                        <div class="sp--dropdown-layer">
                                            <ul>
                                                <li><a href="#!">MENU 2 - 1</a></li>
                                                <li>
                                                    <a href="#!">MENU 2 - 2</a>
                                                    <div class="sp--dropdown-layer">
                                                        <ul>
                                                            <li><a href="#!">MENU 3 - 1</a></li>
                                                            <li><a href="#!">MENU 3 - 2</a></li>
                                                            <li><a href="#!">MENU 3 - 3</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                                <li>
                                                    <a href="#!">MENU 2 - 3</a>
                                                    <div class="sp--dropdown-layer">
                                                        <ul>
                                                            <li><a href="#!">MENU 3 - 1</a></li>
                                                            <li><a href="#!">MENU 3 - 2</a></li>
                                                            <li><a href="#!">MENU 3 - 3</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="gray">NEW 5%</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="gray">MENS</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="gray">WOMENS</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="gray">FIERCE</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="gray">FIERCE</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="gray">FIERCE</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="gray">FIERCE</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="gray">FIERCE</a>
                                        <div class="sp--dropdown-layer">
                                            <ul>
                                                <li><a href="#!">MENU 2 - 1</a></li>
                                                <li>
                                                    <a href="#!">MENU 2 - 2</a>
                                                    <div class="sp--dropdown-layer">
                                                        <ul>
                                                            <li><a href="#!">MENU 3 - 1</a></li>
                                                            <li><a href="#!">MENU 3 - 2</a></li>
                                                            <li><a href="#!">MENU 3 - 3</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                                <li>
                                                    <a href="#!">MENU 2 - 3</a>
                                                    <div class="sp--dropdown-layer">
                                                        <ul>
                                                            <li><a href="#!">MENU 3 - 1</a></li>
                                                            <li><a href="#!">MENU 3 - 2</a></li>
                                                            <li><a href="#!">MENU 3 - 3</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <br /><br /><br />
                            <br /><br /><br />

Float Center

<div class="sp--dropdown" 
                                effect="slideup"
                                scope="[center]"
                                layer="lg-light-outline"
                            >
                                <ul>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="dark">BEST</a>
                                        <div class="sp--dropdown-layer">
                                            <ul>
                                                <li><a href="#!">MENU 2 - 1</a></li>
                                                <li>
                                                    <a href="#!">MENU 2 - 2</a>
                                                    <div class="sp--dropdown-layer">
                                                        <ul>
                                                            <li><a href="#!">MENU 3 - 1</a></li>
                                                            <li><a href="#!">MENU 3 - 2</a></li>
                                                            <li><a href="#!">MENU 3 - 3</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                                <li>
                                                    <a href="#!">MENU 2 - 3</a>
                                                    <div class="sp--dropdown-layer">
                                                        <ul>
                                                            <li><a href="#!">MENU 3 - 1</a></li>
                                                            <li><a href="#!">MENU 3 - 2</a></li>
                                                            <li><a href="#!">MENU 3 - 3</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="dark">NEW 5%</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="dark">MENS</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="dark">WOMENS</a>
                                    </li>
                                </ul>
                            </div>
                            <br /><br /><br />
                            <br /><br /><br />

Float Right

<div class="sp--dropdown" 
                                effect="slideup"
                                scope="[right]"
                                layer="lg-light-outline"
                            >
                                <ul>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="primary">BEST</a>
                                        <div class="sp--dropdown-layer">
                                            <ul>
                                                <li><a href="#!">MENU 2 - 1</a></li>
                                                <li>
                                                    <a href="#!">MENU 2 - 2</a>
                                                    <div class="sp--dropdown-layer">
                                                        <ul>
                                                            <li><a href="#!">MENU 3 - 1</a></li>
                                                            <li><a href="#!">MENU 3 - 2</a></li>
                                                            <li><a href="#!">MENU 3 - 3</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                                <li>
                                                    <a href="#!">MENU 2 - 3</a>
                                                    <div class="sp--dropdown-layer">
                                                        <ul>
                                                            <li><a href="#!">MENU 3 - 1</a></li>
                                                            <li><a href="#!">MENU 3 - 2</a></li>
                                                            <li><a href="#!">MENU 3 - 3</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="primary">NEW 5%</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="primary">MENS</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="primary">WOMENS</a>
                                    </li>
                                </ul>
                            </div>
                            <br /><br /><br />
                            <br /><br /><br />

Main Menu Theme

<div class="sp--dropdown" 
                                scope="center"
                                layer="lg-light-outline"
                            >
                                <ul>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="light">light</a>
                                        <div class="sp--dropdown-layer">
                                            <ul>
                                                <li><a href="#!">MENU 2 - 1</a></li>
                                                <li><a href="#!">MENU 2 - 2</a></li>
                                                <li><a href="#!">MENU 2 - 3</a></li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="gray">gray</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="dark">dark</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="primary">primary</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="underline">underline</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="underline-tick">underline-tick</a>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn sp--currentlink" scale="lg" effect="underline-bold">underline-bold</a>
                                    </li>
                                </ul>
                            </div>
                            <br /><br /><br />
                            <br /><br /><br />

Main Layer Theme

<div class="sp--box" vertical="middle">
                                <ul>
                                    <li>
                                        
                                        <div class="sp--dropdown" 
                                            scope="center"
                                            layer="xl-light-outline"
                                        >
                                            <ul>
                                                <li>
                                                    <a href="#!" class="sp--btn sp--currentlink" scale="xl" bg="light">xl-light-outline</a>
                                                    <div class="sp--dropdown-layer">
                                                        <ul>
                                                            <li><a href="#!">MENU 2 - 1</a></li>
                                                            <li><a href="#!">MENU 2 - 2</a></li>
                                                            <li><a href="#!">MENU 2 - 3</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        
                                        <div class="sp--dropdown" 
                                            scope="center"
                                            layer="xl-gray"
                                        >
                                            <ul>
                                                <li>
                                                    <a href="#!" class="sp--btn sp--currentlink" scale="xl" bg="gray">xl-gray</a>
                                                    <div class="sp--dropdown-layer">
                                                        <ul>
                                                            <li><a href="#!">MENU 2 - 1</a></li>
                                                            <li><a href="#!">MENU 2 - 2</a></li>
                                                            <li><a href="#!">MENU 2 - 3</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        
                                        <div class="sp--dropdown" 
                                            scope="center"
                                            layer="xl-gray-reverse"
                                        >
                                            <ul>
                                                <li>
                                                    <a href="#!" class="sp--btn sp--currentlink" scale="xl" bg="gray">xl-gray-reverse</a>
                                                    <div class="sp--dropdown-layer">
                                                        <ul>
                                                            <li><a href="#!">MENU 2 - 1</a></li>
                                                            <li><a href="#!">MENU 2 - 2</a></li>
                                                            <li><a href="#!">MENU 2 - 3</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        
                                        <div class="sp--dropdown" 
                                            scope="center"
                                            layer="xl-dark"
                                        >
                                            <ul>
                                                <li>
                                                    <a href="#!" class="sp--btn sp--currentlink" scale="xl" bg="dark">xl-dark</a>
                                                    <div class="sp--dropdown-layer">
                                                        <ul>
                                                            <li><a href="#!">MENU 2 - 1</a></li>
                                                            <li><a href="#!">MENU 2 - 2</a></li>
                                                            <li><a href="#!">MENU 2 - 3</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        
                                        <div class="sp--dropdown" 
                                            scope="center"
                                            layer="xl-dark-reverse"
                                        >
                                            <ul>
                                                <li>
                                                    <a href="#!" class="sp--btn sp--currentlink" scale="xl" bg="dark">xl-dark-reverse</a>
                                                    <div class="sp--dropdown-layer">
                                                        <ul>
                                                            <li><a href="#!">MENU 2 - 1</a></li>
                                                            <li><a href="#!">MENU 2 - 2</a></li>
                                                            <li><a href="#!">MENU 2 - 3</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        
                                        <div class="sp--dropdown" 
                                            scope="center"
                                            layer="xl-primary"
                                        >
                                            <ul>
                                                <li>
                                                    <a href="#!" class="sp--btn sp--currentlink" scale="xl" bg="primary">xl-primary</a>
                                                    <div class="sp--dropdown-layer">
                                                        <ul>
                                                            <li><a href="#!">MENU 2 - 1</a></li>
                                                            <li><a href="#!">MENU 2 - 2</a></li>
                                                            <li><a href="#!">MENU 2 - 3</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        
                                        <div class="sp--dropdown" 
                                            scope="center"
                                            layer="xl-primary-reverse"
                                        >
                                            <ul>
                                                <li>
                                                    <a href="#!" class="sp--btn sp--currentlink" scale="xl" bg="primary">xl-primary-reverse</a>
                                                    <div class="sp--dropdown-layer">
                                                        <ul>
                                                            <li><a href="#!">MENU 2 - 1</a></li>
                                                            <li><a href="#!">MENU 2 - 2</a></li>
                                                            <li><a href="#!">MENU 2 - 3</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>

Dropdown Vertical

Dropdown full - left

Dropdown full - center

Dropdown full - right

Dropdown grid - center

Dropdown justify - center

Class

name	description
.sp--dropdown	드롭다운 컨테이너
.sp--dropdown-layer	드롭다운의 첫번째 자식 컨테이너. 첫번째 중분류만 컨테이너에 클래스를 준다. 왼쪽, 중간, 우측으로 자유롭게 보여주기 위함이다.

Attribute

name	description
effect	default : '' ( string) '' or fade or slideup or slidedown