Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*
* Custom Skin Sample
*
* These styles apply when the skin is set to "None". To apply to do different skin, replace the .ubermenu-skin-none prefix with the appropriate skin.
* To apply to all menus, replace .ubermenu-skin-none with just .ubermenu
*/
/* UberMenu - Copyright 2011-2014, SevenSpark */
/* General settings for the skin */
.ubermenu-skin-none {
font-size: 12px;
color: #888888;
}
/* Menu Item Links in general */
.ubermenu-skin-none .ubermenu-target {
color: #555555;
}
/* Menu Item Descriptions */
.ubermenu-skin-none .ubermenu-target-description {
color: #aaaaaa;
}
/* Responsive Toggle */
.ubermenu-skin-none.ubermenu-responsive-toggle {
background: #222222;
color: #eeeeee;
font-size: 12px;
text-transform: uppercase;
font-weight: bold;
}
/* Responsive Toggle - Hover */
.ubermenu-skin-none.ubermenu-responsive-toggle:hover {
background: #111111;
color: #ffffff;
}
/* Menu Bar */
.ubermenu-skin-none {
border: none;
background: #222222;
}
/* Current Top Level Menu Item */
.ubermenu-skin-none .ubermenu-item-level-0.ubermenu-current-menu-item > .ubermenu-target,
.ubermenu-skin-none .ubermenu-item-level-0.ubermenu-current-menu-parent > .ubermenu-target,
.ubermenu-skin-none .ubermenu-item-level-0.ubermenu-current-menu-ancestor > .ubermenu-target {
color: #ffffff;
background: #000000;
}
/* Top Level Highlight */
.ubermenu-skin-none .ubermenu-item.ubermenu-item-level-0 > .ubermenu-highlight {
color: #4d90fe;
background: transparent;
}
/* Vertical Orientation Menu Item Backrounds */
.ubermenu-skin-none.ubermenu-vertical .ubermenu-item-level-0 > .ubermenu-target {
background: #222222;
}
/* Top Level Items */
.ubermenu-skin-none .ubermenu-item-level-0 > .ubermenu-target {
font-weight: bold;
color: #d9d9d9;
text-transform: uppercase;
border-left: none;
}
/* The first top level item */
.ubermenu-skin-none .ubermenu-item-level-0:first-child > .ubermenu-target {
box-shadow: none;
}
/* Top Level Items - Hover */
.ubermenu-skin-none .ubermenu-item-level-0:hover > .ubermenu-target,
.ubermenu-skin-none .ubermenu-item-level-0.ubermenu-active > .ubermenu-target {
background: #000000;
color: #ffffff;
}
/* Top Level Submenu Stack Links */
.ubermenu-skin-none .ubermenu-item-level-0 > .ubermenu-submenu-type-stack > .ubermenu-item > .ubermenu-target {
color: #d9d9d9;
}
.ubermenu-skin-none .ubermenu-item-level-0 > .ubermenu-submenu-type-stack > .ubermenu-item > .ubermenu-target:hover {
color: #ffffff;
}
/* Submenus */
.ubermenu-skin-none .ubermenu-submenu.ubermenu-submenu-drop {
background: #f9f9f9;
border: 1px solid #e0e0e0;
}
.ubermenu-skin-none.ubermenu-horizontal .ubermenu-item-level-0 > .ubermenu-submenu-drop {
border-top: none;
}
/* Tab Content Panel */
.ubermenu-skin-none .ubermenu-tab-content-panel {
background: #f9f9f9;
}
/* Submenu general text color */
.ubermenu-skin-none .ubermenu-submenu,
.ubermenu-skin-none .ubermenu-submenu .ubermenu-target {
color: #555555;
}
/* Submenu highlight color */
.ubermenu-skin-none .ubermenu-submenu .ubermenu-highlight {
color: #4d90fe;
}
/* Submenu Links */
.ubermenu-skin-none .ubermenu-submenu .ubermenu-target:hover,
.ubermenu-skin-none .ubermenu-submenu .ubermenu-active > .ubermenu-target {
color: #111111;
}
/* Submenu Descriptions */
.ubermenu-skin-none .ubermenu-submenu .ubermenu-target > .ubermenu-target-description {
color: #aaaaaa;
}
.ubermenu-skin-none .ubermenu-submenu .ubermenu-active > .ubermenu-target > .ubermenu-target-description {
color: #666666;
}
/* Submenu Headers */
.ubermenu-skin-none .ubermenu-submenu .ubermenu-item-header > .ubermenu-target {
font-weight: bold;
color: #555555;
}
/* Submenu items in a stack */
.ubermenu-skin-none .ubermenu-submenu .ubermenu-item-header.ubermenu-has-submenu-stack > .ubermenu-target {
border-bottom: 1px solid #e9e9e9;
}
/* Submenu Headers - Hover */
.ubermenu-skin-none .ubermenu-submenu .ubermenu-item-header > .ubermenu-target:hover {
color: #222222;
}
/* Current Submenu Item */
.ubermenu-skin-none .ubermenu-submenu .ubermenu-current-menu-item > .ubermenu-target {
color: #222222;
background: transparent;
}
/* Tab Toggle active/hover */
.ubermenu-nojs.ubermenu-skin-none .ubermenu-submenu .ubermenu-tabs .ubermenu-tab:hover > .ubermenu-target,
.ubermenu-skin-none .ubermenu-submenu .ubermenu-tab.ubermenu-active > .ubermenu-target {
background: #eeeeee;
color: #111111;
}
/* Tabs Borders */
.ubermenu-skin-none .ubermenu-tabs-group,
.ubermenu-skin-none .ubermenu-tab > .ubermenu-target,
.ubermenu-skin-none .ubermenu-tab-content-panel {
border-color: #eeeeee;
}
/* Submenu Border */
.ubermenu-skin-none .ubermenu-submenu-drop {
border-bottom-width: 3px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.