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 - Navbar (Horizontal Menu|Navigation Header)

Navbars are responsive component (menu) that serve as navigation headers. The icon that we show in the mobile view when the navigation bar is collapsed is called an hamburger icon.
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...



Share this page:
Follow us:
Task Runner