UI - DropDown

Card Puncher Data Processing

Example

Login

The login element in Bootstrap:

<!-- An container element with the class dropdown is needed. 
Without it, the dropdown-menu elements are going all the way down -->
<div class="dropdown">
  <a href="#" data-toggle="dropdown" class="dropdown-toggle">
  <span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
  <ul class="dropdown-menu">
	<li>
	  <a href="/users/id" title="Profile">Profile</a>
	</li>
	<li>
	  <a href="/logout" title="Logout">Logout </a>
	</li>
  </ul>
</div>

where:





Discover More
Bootstrap - Navbar

in Bootstrap In Bootstrap 4, the Navbar is responsive by default and utilizes flexbox to make alignment of Navbar content much easier. The navbar-header class has been removed from Bootstrap 4, and the...
Firebug Z Index
CSS - z-index property (Layout third axis or Overlap order)

in CSS. Usage: set the z-index on the outermost parent The z-index property applies only to positioned element. It means that the position property should not be static (the default, ie...
Devtool Chrome Event Listener
DOM - Blur Event

blur is an event that occurs when an element lost focus (blur) (ie is not the active element anymore) focus event Close an overlay (such as a dropdown menu) Reset a state
Card Puncher Data Processing
UI - Overlay

An overlay component is a component that comes above the actual components in a absolute position. In Html, it would have a higher value on the z scale (ie z-index) When two elements overlay each other,...
On Off Automaton
UI - Toggle or Collapse (Display or hide elements) (On/Off)

Display or hide UI components. “”|“”O |OSPAimes/status/907487309142126592Twitter Generally toggle activity, when using a responsive design appears to what is called breakpoints: Display...
Card Puncher Data Processing
What are Floating Lists (listbox popup)?

Floating lists are lists that are presented to the user in a overlay They are also known as listbox popup Type Focus after rendering Dropdown Element in the list Select Element in the list ...



Share this page:
Follow us:
Task Runner