Fernando Tabamo Jr - Portfolio

Example #

you can choose the dropdown shadow style by float or flat.

<div class="n-dropdown show">
    <button class="n-btn n-dropdown-toggle" type="button" aria-haspopup="true" aria-expanded="true">
        Example
    </button>
    <div class="n-dropdown-menu" style="display: block; position: static">
        <a class="n-dropdown-item" href="#">Link 1</a>
        <a class="n-dropdown-item" href="#">Link 2</a>
        <a class="n-dropdown-item" href="#">Link 3</a>
        <a class="n-dropdown-item" href="#">Item 4</a>
    </div>
</div>

Live Demo #

you can click the button below to see the live demo.

<div class="n-dropdown">
    <button class="n-btn n-dropdown-toggle" type="button" aria-haspopup="true" aria-expanded="false">
        Dropdown
    </button>
    <div class="n-dropdown-menu">
        <a class="n-dropdown-item" href="#">Link 1</a>
        <a class="n-dropdown-item" href="#">Link 2</a>
        <a class="n-dropdown-item" href="#">Link 3</a>
        <a class="n-dropdown-item" href="#">Item 4</a>
    </div>
</div>

Dropup #

by adding n-dropup class. you can place the dropdown upward.

<div class="n-dropdown n-dropup"> 
    <button class="n-btn n-dropdown-toggle" type="button" aria-haspopup="true" aria-expanded="false">
        Dropup
    </button>
    <div class="n-dropdown-menu">
        <div class="n-dropdown-content">
            <a class="n-dropdown-item" href="#">Item 1</a>
            <a class="n-dropdown-item" href="#">Item 2</a>
            <a class="n-dropdown-item" href="#">Item 3</a> 
            <a class="n-dropdown-item" href="#">Item 4</a>
        </div>
    </div>
</div>

Dropend #

by adding n-dropend class. you can place the dropdown towards left.

<div class="n-dropdown n-dropend"> 
    <button class="n-btn n-dropdown-toggle" type="button" aria-haspopup="true" aria-expanded="false">
        Dropend
    </button>
    <div class="n-dropdown-menu">
        <div class="n-dropdown-content">
            <a class="n-dropdown-item" href="#">Item 1</a>
            <a class="n-dropdown-item" href="#">Item 2</a>
            <a class="n-dropdown-item" href="#">Item 3</a> 
            <a class="n-dropdown-item" href="#">Item 4</a>
        </div>
    </div>
</div>

Interactive #

by putting data-interactive="true" in attribute. the dropdown menu will be interactive and will be close only when clicking the toggler or the background.

<div class="n-dropdown" data-interactive="true"> 
    <button class="n-btn n-dropdown-toggle" type="button" aria-haspopup="true" aria-expanded="false">
        Interactive
    </button>
    <div class="n-dropdown-menu" style="min-width: 250px">
        <div class="n-dropdown-content">
            <div class="n-form-field">
                <label>Username</label>
                <input class="n-form-control" type="text" placeholder="enter username..." name="username"/>
            </div>
            <div class="n-form-field">
                <label>Password</label>
                <input class="n-form-control" type="password" placeholder="enter password..." name="password"/>
            </div>
            <div class="n-form-field">
                <label class="n-form-check"><input class="n-form-control" type="checkbox" name="remember" />remember me</label>
            </div>  
            <button class="n-btn" >Submit</button>
        </div>
    </div>
</div>

Dropdown Tree #

you can also achieve dropdown tree

<div class="n-dropdown"> 
    <button class="n-btn n-dropdown-toggle" type="button" aria-haspopup="true" aria-expanded="false">
        Tree
    </button>
    <div class="n-dropdown-menu">
        <div class="n-dropdown-content"> 
            <a class="n-dropdown-item" href="#">Item 1</a>
            <a class="n-dropdown-item" href="#">Item 2</a>
            <div class="n-dropdown"> 
                <a class="n-dropdown-item n-dropdown-toggle" href="#">Item 3</a>
                <div class="n-dropdown-menu">
                    <div class="n-dropdown-content"> 
                        <a class="n-dropdown-item" href="#">Item 3 1</a>
                        <a class="n-dropdown-item" href="#">Item 3 2</a>
                        <a class="n-dropdown-item" href="#">Item 3 3</a> 
                        <a class="n-dropdown-item" href="#">Item 3 4</a>
                    </div>
                </div>
            </div>
            <div class="n-dropdown"> 
                <a class="n-dropdown-item n-dropdown-toggle" href="#">Item 4</a>
                <div class="n-dropdown-menu">
                    <div class="n-dropdown-content"> 
                        <a class="n-dropdown-item" href="#">Item 4 1</a>
                        <a class="n-dropdown-item" href="#">Item 4 2</a>
                        <a class="n-dropdown-item" href="#">Item 4 3</a> 
                        <a class="n-dropdown-item" href="#">Item 4 4</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript #

using N.dropdown.getInstance(dropdownElement) it can initialize the .n-dropdown when it is not initialize yet and get the instance at the same time. if the .n-dropdown is already initialize, it will only get the instance.

document.addEventListener("DOMContentLoaded", (event) => {
    // apply the dropdown script to all .n-dropdown element
    const elements = document.querySelectorAll('.n-dropdown')
    elements.forEach((el) => {
        const instance = N.dropdown.getInstance(el)
    });
})

Methods #

Method Method	Return Return	Description Description
Instance.show	void	to show the dropdown programmatically.
Instance.close	void	to close the dropdown programmatically.
Instance.destroy	void	it is use to destroy and kill the dropdown instance.

Events #

All dropdown events are fired at the .n-dropdown element.

Event Event	Description Description
show.n.dropdown	This event fires immediately when the show instance method is called.
shown.n.dropdown	This event fires when the dropdown is completely shown (CSS transition is complete).
hide.n.dropdown	This event fires immediately when the close instance method is called.
hidden.n.dropdown	This event fires when the dropdown is completely hidden (CSS transition is complete).

const dropdown = document.querySelector('#my-dropdown')
dropdown.addEventListener('show.n.dropdown'. (event) => {
    // do something here...
})

DARK THEME

Dropdown

Warning!