We are accustomed to creating drop-downs in our navigation bars, but sometimes we are faced with the need of creating drop ups.

In Susper, we had to create a drop up for settings for the footer.

This is how it looks:

Let us see the step by step procedure to create the drop up:

1. Write the required Html content (in Susper it is in the footer-navbar.component.html)

<span class="dropup">

 <a class="dropdown-toggle" data-toggle="dropdown">Settings</a>

 <ul class="dropdown-menu" id="fsett">

   <li><a routerLink="/preferences">Search settings</a></li>

   <li><a routerLink="/advancedsearch">Advanced Search</a></li>

   <li><a routerLink="/crawlstartexpert" routerLinkActive="active">Crawl Job</a></li>

 </ul>

</span>

Make sure to link all the listed items in the drop down correctly. Notice that all of this has been put in the parent tag span, with class drop up

2. We need to write the CSS part now:

.dropup{

cursor: pointer;

}

#fsett {

background: #fff;

border: 1px solid #999;

bottom: 30px;

padding: 10px 0;

position: absolute;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

text-align: left;

z-index: 104;

margin-left: -85%;

margin-bottom: -9%;

}

#fsett a {

display: block;

line-height: 44px;

padding: 0 20px;

text-decoration: none;

white-space: nowrap;

}

#fsett a:hover {

text-decoration: underline;

background-color: white;

}

Here are some useful attributes, that can style your drop up:

• Cursor: It sets your cursor to whatever you like when you move over the drop up. The pointer changes it to the hand symbol, default changes it to the standard arrow and so on…
• Z-index: can be used to set the height of your elements, it is equal to its parent element by default, setting the z-index of something to more than that will make it have a higher stack order so it will be in the front.
• Text-decoration: This attribute is used to add/remove decoration like underline for links.
• Margin and position: Use margin-left and margin-right to set the position of the drop-up, combine it with position: absolute, to give absolute dimensions.
• Box-shadow: This gives the drop up a shadow effect, which looks really nice. The first 3 parameters are for dimensions (X-offset, Y-offset, Blur). The rgba specifies colour, with parameters as (red-component, green-component, blue-component, opacity).