+38 096 193 97 31 info@endeavorrcing.com outsourcing

Big slider second

  • Ken Burns Effect

    Outsourcing

    Company

    Create your team to do even more amazing things. Designers, web designers,
    programmers, marketing managers — you can earn more ...

    Details Contact us
  • Ken Burns Effect

    Outsourcing

    Company

    Create your team to do even more amazing things. Designers, web designers, programmers, marketing managers — you can earn more ...

    Details Contact us
  • Ken Burns Effect

    Outsourcing

    Company

    Create your team to do even more amazing things. Designers, web designers,
    programmers, marketing managers — you can earn more ...

    Details Contact us

Breadcrumbs

Dropdown

Home

  • Ken Burns Effect

    Outsourcing Company

    Create your team to do even more amazing things. Designers, web designers, programmers, marketing managers — you can earn more ...

  • Ken Burns Effect

    Outsourcing
    Company

    Create your team to do even more amazing things. Designers, web designers,
    programmers, marketing managers — you can earn more ...

  • Ken Burns Effect

    Outsourcing
    Company

    Create your team to do even more amazing things. Designers, web designers,
    programmers, marketing managers — you can earn more ...

Smart

Creative

speed

reliability

214 projects

Home second – About team

About team

incredible success story

This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal! The delicate whiskers, tail and ears show great attention to detail. This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal!

Watch more

Home second – Conatct us today

Conatct us today

This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal!

Start working with us

right now!

Home second -214 projects

214 projects

24 Testimonials

  • Sritopsil Krutopal

    Collla India


    This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal! The delicate whiskers, tail and ears show great attention to detail. This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal!

  • JC Richards

    Torbara


    This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal! The delicate whiskers, tail and ears show great attention to detail.

  • Amelie Braxton

    Global Hosting Ltd.


    This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal! The delicate whiskers, tail and ears show great attention to detaillittle cheese in Light Topaz crystal!

  • JC Richards

    Torbara


    This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal! The delicate whiskers, tail and ears show great attention to detail.

  • Sritopsil Krutopal

    Collla India


    This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal! The delicate whiskers, tail and ears show great attention to detail. This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal!

  • Amelie Braxton

    Global Hosting Ltd.


    This little clear crystal mouse is so happy with her little cheese in Light Topaz
    crystal! The delicate whiskers, tail and ears show great attention to detaillittle cheese in Light Topaz crystal!

Timeline

  • Responsible for the work

    Our core mission is to help our community earn a living online doing work they are passionate about. We hope you’ll agree the result is pretty spectacular! Read more about Our Community. Designers, developers and creatives from all over the

    Read more
  • Designers, developers and creatives

    Designers, developers and creatives from all over the globe are responsible for the work you see across Envato’s ecosystem, whether it’s items for sale on Envato Market, tutorials on Tuts+ or talented freelancers working at Envato Studio. Designers, developers and

    Read more
  • All over the globe

    Designers, developers and creatives from all over the globe are responsible for the work you see across Envato’s ecosystem, whether it’s items for sale on Envato Market, tutorials on Tuts+ or talented freelancers working at Envato Studio. Our core mission

    Read more
  • Responsible for the work

    Our core mission is to help our community earn a living online doing work they are passionate about. We hope you’ll agree the result is pretty spectacular! Read more about Our Community. Designers, developers and creatives from all over the

    Read more
  • Designers, developers and creatives from all over the globe

    Designers, developers and creatives from all over the globe are responsible for the work you see across Envato’s ecosystem, whether it’s items for sale on Envato Market, tutorials on Tuts+ or talented freelancers working at Envato Studio. Our core mission

    Read more
  • Designers, developers and creatives

    Designers, developers and creatives from all over the globe are responsible for the work you see across Envato’s ecosystem, whether it’s items for sale on Envato Market, tutorials on Tuts+ or talented freelancers working at Envato Studio. Designers, developers and

    Read more
  • Designers, developers and creatives from all over the globe are responsible for the work

    Designers, developers and creatives from all over the globe are responsible for the work you see across Envato’s ecosystem, whether it’s items for sale on Envato Market, tutorials on Tuts+ or talented freelancers working at Envato Studio. Our core mission

    Read more
  • Designers, developers and creatives from all over the globe are responsible for the work

    Designers, developers and creatives from all over the globe are responsible for the work you see across Envato’s ecosystem, whether it’s items for sale on Envato Market, tutorials on Tuts+ or talented freelancers working at Envato Studio. Our core mission

    Read more

Home second – Start cooperation

Start cooperation with us

right now!

Home second -Start cooperation with us

tariff

standart

Designers, developers and creatives from all over

  • Development task
  • Creative included
  • Additional materials
  • 1 designer-illustrator
  • 5 mockups

€ 400

order this

tariff

premium

Designers, developers and creatives from all over

  • Development task
  • Creative included
  • Additional materials
  • 3 designer-illustrator
  • 10 mockups

€ 900

order this

tariff

vip

Designers, developers and creatives from all over

  • Development task
  • Creative included
  • Additional materials
  • 5 designer-illustrator
  • 25 mockups

€ 1900

order this

Features

Amazing feature

Art party crucifix typewriter, iPhone skateboard dreamcatcher migas stumptown pickled keytar post-ironic four dollar toast tilde.

Awesome feature

Whatever bicycle rights umami, meh lo-fi sriracha franzen fap. Gastropub iPhone artisan tumblr, schlitz migas gentrify pickled fanny pack.

Incredible feature

Keffiyeh four loko scenester salvia portland, post-ironic plaid ethical offal wayfarers artisan vegan man braid affogato. Church-key meh austin, literally kitsch quinoa lomo.

Feature

Cardigan ennui YOLO, meggings sriracha disrupt pour-over viral fingerstache truffaut bushwick poutine chicharrones mumblecore small batch.

Home second – Subscribe to newsletter

Subscribe to newsletter

  • Sritopsil Krutopal

    Collla India


    This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal! The delicate whiskers, tail and ears show great attention to detail. This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal!

  • JC Richards

    Torbara


    This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal! The delicate whiskers, tail and ears show great attention to detail.

  • Amelie Braxton

    Global Hosting Ltd.


    This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal! The delicate whiskers, tail and ears show great attention to detaillittle cheese in Light Topaz crystal!

  • JC Richards

    Torbara


    This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal! The delicate whiskers, tail and ears show great attention to detail.

  • Sritopsil Krutopal

    Collla India


    This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal! The delicate whiskers, tail and ears show great attention to detail. This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal!

  • Amelie Braxton

    Global Hosting Ltd.


    This little clear crystal mouse is so happy with her little cheese in Light Topaz
    crystal! The delicate whiskers, tail and ears show great attention to detaillittle cheese in Light Topaz crystal!

Defines different styles for a toggleable dropdown.

Usage

Any content, like a button, can toggle a dropdown. Just wrap the toggle with a <div> element and add the data-uk-dropdown attribute. Add the .uk-dropdown class to a child <div> element to create the dropdown itself. A dropdown can be enabled by either hovering or clicking the the toggle.

Data attribute Description
data-uk-dropdown Opens the dropdown on hover and adds a little delay, so the dropdown won’t disappear immediately, once you stop hovering the toggle.
data-uk-dropdown="{mode:'click'}" Opens the dropdown by clicking the toggle. The dropdown closes again on the next click.

IMPORTANT To apply a dropdown, it is important that a parent element has a relative position to align the dropdown properly. Many components create the position context by default, like the Button, Navbar, Subnav and the Tab component.

Example

NOTE In this example we are using a button from the Button component as a toggle.

Markup

<!-- This is the container enabling the JavaScript -->
<div data-uk-dropdown>

    <!-- This is the element toggling the dropdown -->
    <div>...</div>

    <!-- This is the dropdown -->
    <div class="uk-dropdown">...</div>

</div>

<!-- This is the container enabling the JavaScript in click mode -->
<div data-uk-dropdown="{mode:'click'}">

    <!-- This is the element toggling the dropdown -->
    <div>...</div>

    <!-- This is the dropdown -->
    <div class="uk-dropdown">...</div>

</div>

Delayed dropdowns in hover mode

You can set a delay parameter in milliseconds to prevent the immediate appearance of the dropdown.

Markup

<div class="uk-dropdown" data-uk-dropdown="{delay: 1000}">
    ...
</div>

Dropdown with navs

A dropdown can contain a nav from the Nav component. Just add the .uk-nav class and the .uk-nav-dropdown modifier to a <ul> element.

Markup

<div class="uk-dropdown">
    <ul class="uk-nav uk-nav-dropdown">...</ul>
</div>

Alignment modifiers

Add one of the following classes to align the dropdown menu.

Class Description
.uk-dropdown-flip Aligns the dropdown menu to the right.
.uk-dropdown-up Aligns the dropdown menu above the toggle.
.uk-dropdown-center Centers the dropdown menu.

Example

Markup

<div class="uk-dropdown uk-dropdown-flip">
    ...
</div>

<div class="uk-dropdown uk-dropdown-up">
    ...
</div>

<div class="uk-dropdown uk-dropdown-center">
    ...
</div>

Justify dropdown

To justify a dropdown, just add the data-uk-dropdown="{justify:'#ID'}" attribute. The parent element, to which the dropdown should be justified, needs to have the target id, so the dropdown will expand to the full width of the targeted element.

Example

Markup

<!-- This is the parent element to which the dropdown is being justified -->
<div id="my-id">

    <!-- This is the container enabling the JavaScript -->
    <div class="uk-button-dropdown" data-uk-dropdown="{justify:'#my-id'}">

        <!-- This is the element toggling the dropdown -->
        <button class="uk-button">...</button>

        <!-- This is the dropdown -->
        <div class="uk-dropdown">...</div>
    </div>
</div>

Automatic dropdown flip

By default, the dropdown flips automatically when it exceeds the viewport’s edge. If you want to flip it according to a container’s boundary, just add the data-uk-dropdown="{boundary:'#ID'}" attribute, using a selector for the container.

Example

Markup

<div id="my-id">
    <div class="uk-button-dropdown" data-uk-dropdown="{boundary:'#my-id'}">...</div>
</div>

Grid

You can even place a grid from the Grid component inside a dropdown, which can hold a navigation or any other content. Just wrap the content with a <div> and add the .uk-grid class. To optimize the grid for use inside the dropdown, add the .uk-dropdown-grid class. Add one of the .uk-dropdown-width-* classes to the grid’s child elements to multiply the dropdown’s width by up to 5.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Markup

<div class="uk-dropdown uk-dropdown-width-2">

    <div class="uk-grid uk-dropdown-grid">
        <div class="uk-width-1-2">
            <ul class="uk-nav uk-nav-dropdown uk-panel">...</ul>
            <div class="uk-panel">...</div>
        </div>

        <div class="uk-width-1-2">
            <div class="uk-panel">...</div>
        </div>
    </div>

</div>

Responsive behavior

In narrower viewports, like phones, there might not be enough space for the dropdown to expand. In that case the dropdown flips its alignment. Should there still not be enough space, the grid columns take up full width and stack vertically inside the dropdown.


Small modifier

By default, the dropdown has a fixed width and the text is wrapping into the next line. If you want your dropdown to be smaller, so that it extends to the width of its content without the text wrapping, add the .uk-dropdown-small class. This is useful for button dropdowns.

Example

Markup

<div class="uk-dropdown uk-dropdown-small">...</div>

Scrollable modifier

To give the dropdown a fixed height and enable its content to scroll, just add the .uk-dropdown-scrollable class.

Example

Markup

<div class="uk-dropdown uk-dropdown-scrollable">...</div>

Dropdowns are an essential part of a navbar from the Navbar component. Just add the .uk-dropdown-navbar class to the dropdown, so the dropdown fits perfectly into the navbar.

Example

Markup

<nav class="uk-navbar">
    <ul class="uk-navbar-nav">

        <!-- This is the container enabling the JavaScript -->
        <li class="uk-parent" data-uk-dropdown>

            <!-- This is the menu item toggling the dropdown -->
            <a href="">...</a>

            <!-- This is the dropdown -->
            <div class="uk-dropdown uk-dropdown-navbar">
                <ul class="uk-nav uk-nav-navbar">
                    <li><a href="">...</a></li>
                </ul>
            </div>

        </li>
    </ul>
</nav>

A button from the Button component can be used to trigger a dropdown menu.

Example

Markup

<!-- This is the container enabling the JavaScript -->
<div class="uk-button-dropdown" data-uk-dropdown>

    <!-- This is the button toggling the dropdown -->
    <button class="uk-button">...</button>

    <!-- This is the dropdown -->
    <div class="uk-dropdown uk-dropdown-small">
        <ul class="uk-nav uk-nav-dropdown">
            <li><a href="">...</a></li>
            <li><a href="">...</a></li>
        </ul>
    </div>

</div>

Dropdown in button groups

Use button groups from the Button component to split buttons into a standard action and a dropdown toggle.

Example

Markup

<div class="uk-button-group">

    <!-- This is a button -->
    <button class="uk-button">...</button>

    <!-- This is the container enabling the JavaScript -->
    <div data-uk-dropdown="{mode:'click'}">

        <!-- This is the button toggling the dropdown -->
        <a href="" class="uk-button">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
                <li><a href="">...</a></li>
            </ul>
        </div>

    </div>
</div>

Dropdowns can also be applied to a subnav from the Subnav component.

Example

Markup

<ul class="uk-subnav uk-subnav-pill">
    <li><a href="">...</a></li>

    <!-- This is the container enabling the JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- This is the nav item toggling the dropdown -->
        <a href="">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>

    </li>
</ul>

Dropdowns can be used on a tab from the Tab component.

Example

Markup

<ul class="uk-tab" data-uk-tab>
    <li><a href="">...</a></li>

    <!-- This is the container enabling the JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- This is the menu item toggling the dropdown -->
        <a href="">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>
    </li>
</ul>

JavaScript options

This is an example of how to set options via attribute:

data-uk-dropdown="{mode:'hover'}"
Option Possible value Default Description
mode hover, click hover Dropdown trigger behaviour
remaintime integer 800 Remain time before auto closing dropdown in hover mode
justify CSS selector false Stretch dropdown width to a specified element
boundary window CSS selector Referenced element to keep dropdowns visibilty
delay integer 0 Delay time in hover mode before a dropdown is shown in ms

Events

You can bind callbacks to following events for custom functionality:

Name Description
show.uk.dropdown Triggered on dropdown show
stack.uk.dropdown Triggered when a dropdown stacks to fit into screen

Example

$('[data-uk-dropdown]').on('show.uk.dropdown', function(){
    // custom code...
});

illustration projects

This little clear crystal mouse is so happy with her little cheese in Light Topaz crystal! The delicate whiskers, tail and ears show great attention to detail. This cute treasure makes a perfect gift or special treat for yourself. Decoration object.

Get in touch

121 King Street, Melbourne, Australia


+38 096 681 68 14

info@endeavorrcing.com

rocket.outsourcing

Quick Feedback