Adding Multiple Sub Links for Mobile Devices - Mike Matenkosky

Adding Multiple Sub Links for Mobile Devices

Currently SmugMug only shows one level deep beyond the top level in the navigation menu on mobile devices. If you really want more levels on mobile devices, you’ll have to create your own custom menu using a HTML/CSS block. Doing this will allow you to display your menu on desktops as well, so you don’t need to use the SmugMug menu.

I’m displaying both the Menu text and the Hamburger icon. You can hide either by adding #toggle-menu .toggle-menu-text{display:none} for the menu text or the #toggle-menu .sm-fonticon-Menu{display:none;} for the Hamburger icon in the CSS section.

You’ll have to add/subtract menu items, add the links where it says <a href="#">, and change the colors.

If you add more dropdown lines, each input checkbox id number has its own number (id="sm10") corresponding with its own label for number (for="sm10"). You need to change each number as you add more links.

HTML


<nav id="menu">
	<label for="tm" id="toggle-menu"><span class="sm-fonticon sm-fonticon-Menu"></span><span class="toggle-menu-text">Menu</span></label>
	<input type="checkbox" id="tm">
	<ul class="main-menu clearfix">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2<label title="Toggle Drop-down" class="drop-icon" for="sm0"></label></a>
			<input type="checkbox" id="sm0">
			<ul class="sub-menu">
				<li><a href="#">Item 2.1</a></li>
				<li><a href="#">Item 2.2</a></li>
				<li><a href="#">Item 2.3</a></li>
				<li><a href="#">Item 2.4</a></li>
			</ul>
		</li>
		<li><a href="#">Item 3<label title="Toggle Drop-down" class="drop-icon" for="sm1"></label></a>
			<input type="checkbox" id="sm1">
			<ul class="sub-menu">
				<li><a href="#">Item 3.1</a></li>
				<li><a href="#">Item 3.2<label title="Toggle Drop-down" class="drop-icon" for="sm2"></label></a>
					<input type="checkbox" id="sm2">
					<ul class="sub-menu">
						<li><a href="#">Item 3.2.1</a></li>
						<li><a href="#">Item 3.2.2</a></li>
						<li><a href="#">Item 3.2.3</a></li>
					</ul>
				</li>		
			</ul>
		</li>
		<li><a href="#">Item 4<label title="Toggle Drop-down" class="drop-icon" for="sm3"></label></a>
			<input type="checkbox" id="sm3">
			<ul class="sub-menu">
				<li><a href="">Item 4.1<label title="Toggle Drop-down" class="drop-icon" for="sm4"></label></a>
					<input type="checkbox" id="sm4">
					<ul class="sub-menu">
						<li><a href="">Item 4.1.1</a></li>
						<li><a href="">Item 4.1.2</a></li>
						<li><a href="">Item 4.1.3</a></li>
						<li><a href="">Item 4.1.4</a></li>
					</ul>
				</li>
				<li><a href="">Item 4.2<label title="Toggle Drop-down" class="drop-icon" for="sm5"></label></a>
					<input type="checkbox" id="sm5">
					<ul class="sub-menu">
						<li><a href="">Item 4.2.1</a></li>
						<li><a href="">Item 4.2.2</a></li>
						<li><a href="">Item 4.2.3</a></li>
					</ul>
				</li>
				<li><a href="">Item 4.3<label title="Toggle Drop-down" class="drop-icon" for="sm6"></label></a>
					<input type="checkbox" id="sm6">		  
					<ul class="sub-menu">
						<li><a href="">Item 4.3.1</a></li>
						<li><a href="">Item 4.3.2</a></li>
						<li><a href="">Item 4.2.2</a></li>
						<li><a href="">Item 4.3.4</a></li>
						<li><a href="">Item 4.3.5</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Item 5</a></li>
		<li><a href="#">Item 6<label title="Toggle Drop-down" class="drop-icon" for="sm8"></label></a>
			<input type="checkbox" id="sm8">
			<ul class="sub-menu">
				<li><a href="">Item 6.1</a></li>
				<li><a href="">Item 6.2<label title="Toggle Drop-down" class="drop-icon" for="sm9"></label></a>
					<input type="checkbox" id="sm9">
					<ul class="sub-menu">
						<li><a href="">Item 6.2.1</a></li>
						<li><a href="">Item 6.2.2<label title="Toggle Drop-down" class="drop-icon" for="sm10"></label></a>
							<input type="checkbox" id="sm10">		  
							<ul class="sub-menu">
								<li><a href="">Item 6.2.2.1</a></li>
								<li><a href="">Item 6.2.2.2</a></li>
								<li><a href="">Item 6.2.2.2</a></li>
							</ul>						
						</li>						
						<li><a href="">Item 6.2.3</a></li>
					</ul>
				</li>				
				<li><a href="">Item 6.2</a></li>
				<li><a href="">Item 6.4</a></li>
			</ul>    
		</li>
	</ul>
</nav>

CSS


/**
* Adding Multiple Sub Links for Mobile Devices
***************************************************/
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}	

#menu .main-menu,
#menu .sub-menu, 
#menu ul span.drop-icon,
#menu input[type="checkbox"] { display: none; }
	
#menu ul {
	margin: 0;
	padding: 0;
}

#tm:checked + .main-menu { display: block; }

#menu li, 
#toggle-menu, 
#menu .sub-menu li { border-style: solid; }
	
#menu li { border-color: rgba( 255, 255, 255, .1 ); }
	
#toggle-menu, 
#menu .sub-menu li { border-color: rgba( 0, 0, 0, .5 ); }	

#menu li, 
#toggle-menu { border-width: 0 0 1px; }

#menu .sub-menu {
	background-color: #454545;
	border-width: 1px 1px 0;
}

#menu li:last-child,	
#menu .sub-menu li:last-child {	border-width: 0; }

#menu li, 
#toggle-menu, 
#menu a {
	position: relative;
	display: block;
	color: white;
}

#menu,
#toggle-menu { background: #151515; }
	
#toggle-menu { text-align: center; }
	
#toggle-menu .toggle-menu-text,
#toggle-menu .sm-fonticon-Menu { width: 100%; }
	
#toggle-menu .sm-fonticon-Menu {
	font-size: 48px;
	line-height: 24px;
}	

#menu a,
#toggle-menu { padding: 1em 1.5em; }

#menu a {
	color: #e3e3e3;
	transition: all .125s ease-in-out;
}

#menu a:hover {
	background-color: rgba( 255, 255, 255, .1 );
	color: #fefefe;
}

#menu input[type="checkbox"]:checked + .sub-menu { display: block; }

#menu .sub-menu a:hover { color: #f1f1f1; }
 
#menu li label.drop-icon { color: rgba( 255, 255, 255, .75 ); }

#menu li > a label.drop-icon::after {
	content: '\E033';
	display: inline-block;
	position: absolute;
	right: 10px;
	margin: 0;
	font: normal 14px/1 'SmugMug Icon Font Regular';
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
}

@media only screen and ( min-width: 736px ) {
	
	#menu .main-menu { display: block; }

	#toggle-menu, 
	#menu label.drop-icon { display: none; }

	#menu li > a::after {
		content: '\E033';
		display: inline-block;
		margin:  0 0 0 5px;
		padding-left: 5px;
		font: normal 14px/1 'SmugMug Icon Font Regular';
		vertical-align: top;
		-webkit-font-smoothing: antialiased;
	}

	#menu li a:only-child::after { content: '';	}

	#menu li li > a::after {
		position: absolute;
		vertical-align: middle;
		margin: 3px 0 0;
		right: 10px;
		transform: rotate(-90deg);
	}

	#menu li {
		float: left;
		border-width: 0 1px 0 0;
	}

	#menu .sub-menu li { float: none; }	
			
	#menu .sub-menu {
		border-width: 0;
		margin: 0;
		position: absolute;
		top: 100%;
		left: 0;
		width: 12em;
		z-index: 3000;
	}

	#menu .sub-menu, 
	#menu input[type="checkbox"]:checked + .sub-menu { display: none; }

	#menu .sub-menu li { border-width: 0 0 1px; }

	#menu .sub-menu .sub-menu {
		top: 0;
		left: 100%;
	}

	#menu .sub-menu .drop-icon {
		position: absolute;
		top: 0;
		right: 0;
		padding: 1em;
	}

	#menu li:hover > input[type="checkbox"] + .sub-menu { display: block; }
		
}

@media screen and ( max-width: 736px ){
	
	#menu .sub-menu li { text-indent: 1.5rem; }	
		
	#menu .sub-menu li li { text-indent: 3rem; }
	
	#menu .sub-menu li li li { text-indent: 4.5rem; }
		
}

Powered by SmugMug Log In