Customize Menu and Dropdowns - Prints for Sale

Customize Menu and Dropdowns

I came up with these menu customizations when I tried to match my WordPress site. Just add these to your Theme’s CSS and you can change the colors to suit your theme.

Adds Sub-menu Indicator on Top Menu

This will add indicator, an inverted yellow triangle, on each sub-menu on your top menu bar. In this example I have two sub-menus (#2 and #3). Just edit the number(s) of sub-menus the :nth-child() in the parenthesis.

CSS


/** 
* Adds Indicators on Top Menu and Sub-Menus
***************************************************/	
.sm-page-layout-region-header .sm-page-widget-nav-toplink:nth-child(2):after,	
.sm-page-layout-region-header .sm-page-widget-nav-toplink:nth-child(3):after,
.sm-page-layout-region-header .yui3-menu-can-have-children > .yui3-menu-label::after {
	font-family: 'SmugMug Icon Font Small';
	content: '\E01F';
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	}	
		/* Top Menu */
	.sm-page-layout-region-header .sm-page-widget-nav-toplink:nth-child(2):after,	
	.sm-page-layout-region-header .sm-page-widget-nav-toplink:nth-child(3):after{
		font-size: 28px;
		margin-left: 5px; 
		}	
			/* Subs */
		.sm-page-layout-region-header .yui3-menu-can-have-children > .yui3-menu-label::after {
			font-size: 24px;
			line-height: 48px;
			-webkit-transform: rotate(-90deg);
			   -moz-transform: rotate(-90deg);
				-ms-transform: rotate(-90deg);
				 -o-transform: rotate(-90deg);
					transform: rotate(-90deg);
			}	
			
	/* Top Padding for Drop-Downs */		
.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu {
	padding-top: 10px;
	}
	
	/* Indicator Color */
.sm-page-layout-region-header .sm-page-widget-nav-toplink:nth-child(2):after,	
.sm-page-layout-region-header .sm-page-widget-nav-toplink:nth-child(3):after,
.sm-page-layout-region-header .yui3-menu-vertical .yui3-menu-can-have-children > a.yui3-menu-label::after, 
.sm-page-layout-region-header .yui3-menu-vertical .yui3-menu-can-have-children > a.yui3-menu-label:hover::after {
	color: yellow;
	}	

Adds Pointers on Sub-menu Items

This will add a “pointer” (red triangle) on the top of each dropdown boxes.

CSS

		
/** 
* Adds Pointers on Sub-menu Items
***************************************************/	
.yui3-menu > ul::before,
.yui3-menu li > ul::before {
	content: '';
	position: absolute;
	border-width: 6px;
	border-style: solid;
	border-top: none;
	border-right-color: transparent;
	border-left-color: transparent;
	}	
	.yui3-menu > ul::before {
		top: -7px;
		left: 20px;
		}				
	.yui3-menu li > ul::before {
		top: 22px;
		left: -9px;
		-webkit-transform: rotate(-90deg);
		   -moz-transform: rotate(-90deg);
			-ms-transform: rotate(-90deg);
			 -o-transform: rotate(-90deg);
				transform: rotate(-90deg);
		}	

/* Pointer Color */		
.yui3-menu > ul::before,
.yui3-menu li > ul::before	{
	border-bottom-color: #f00;
	}	
	
	/* Adds Transistions on Menus */	
.yui3-menu > ul,
.yui3-menu-children .yui3-menu-open:hover ul {
	 -webkit-transition: all 0.5s ease-out;
		-moz-transition: all 0.5s ease-out;
		 -ms-transition: all 0.5s ease-out;
		  -o-transition: all 0.5s ease-out;
		 transition: all 0.5s ease-out;	
	}	

	/* Hides Background w/Transition */	
	.sm-user-ui.yui3-menu-open,
	.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
		background: transparent;
		}	
		
	/* Movements for Drop-down */	
	.yui3-menu > ul {
		top: 10px;
		left: 0;
		margin-left: -18px;
		}	
		
		/* Movements for sub Drop-downs */	
		.yui3-menu-children .yui3-menu-open ul {
			top: 0;
			left: 10px;
			margin: 0 7px;
			}	

Different Color for Active/Hover Sub-menus

This adds a different color (green) for the active and hover page.

CSS

	
/** 
* Different Color for Active/Hover Sub-menus
***************************************************/	
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-activepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .yui3-menu-item .sm-page-widget-nav-activepage > a {
	color: green;
	}			

ActionActionAltAdjustAlertAlert2AngleBracketDownAngleBracketLeftAngleBracketLeftSlimAngleBracketRightAngleBracketRightSlimAngleBracketUpic AspectRectable 18dpic AspectSquare 18dpBrowserCalendarCameraPhotoCameraPhoto2CameraVideo2CartCart2CartAddCartAdd2CheckmarkCommentComment2CreditCardCropDesktopDownloadDownload2EditEdit2EmailEmail2FlagFlag2FolderFolder2FolderOpenFullScreenGalleryGallery2GearHeartHeartOutlinedHelpHelpEncircledHideHistoryHistory2HomeHome2ImageImage2InfoInfoEncircledInfoEncircled2LaptopLayoutLinkLockLock2MenuMenu2MinusMinusSlimMobileMoreHorizMoreVertPagePage2PausePlayPlusPlusSlimPrinterSearchSearch2ShareSizesStarStarOutlinedSyncTabletTagTrashTrash2UploadUpload2UserUsersVideoCameraViewWarningWrenchXCrossActionActionAltAddAdjustAlertAlert2AmazonAndroidAppleArrowBackArrowNextBrowserCameraPhotoCameraPhoto2CartCart2CartAddCheckCloseCommentComment2CropCursorMoveDesktopDownloadDropboxFacebookFlickrFolderFolder2FullScreenSlimGalleryGallery2GoogleDriveGooglePhotosHelpEncircledHelpEncircled2HistoryHistory2HomeHome2InfoEncircledInfoEncircled2LaptopLayoutLightroomLinkLockLock2MenuMobileMoreHorizMoreVertNavigateBackNavigateNextPaintPausePeoplePeople2PersonPerson2PhoneSavePlayPrinterRemoveSearchSettingsSettings2ShareSharePrivateSizesSmugMugStarStar2TabletTrashTrash2TwitterUploadUpload2Wrench Page 1Page 1 CopyCombined ShapeCombined ShapeCombined ShapeCombined ShapetemplatestemplatesEZprints-98404-landscapeEZprints-98404-portraittemplatestemplatesEZprints-98406-landscapeEZprints-98406-portraitEZprints-98407-landscapeEZprints-98407-portraittemplatestemplatestemplatestemplatesEZprints-98416-landscapeEZprints-98416-portraitEZprints-98417-landscapeEZprints-98417-portraitEZprints-98418-landscapeEZprints-98418-portraitEZprints-98419-landscapeEZprints-98419-portraitshared-style-defs
Powered by SmugMug Log In