Off-Canvas Navigation Menu For SmugMug - Mike Matenkosky

Off-Canvas Navigation Menu For SmugMug

SmugMug Off Canvas Navigation Menu

If you are looking for a different menu than what SmugMug offers, then read on! The tutorial is based on Pure CSS Off-Canvas Menu by Gabriel Neagu.

Add a HTML/CSS block to the top of your header section. The width must be 100% and remove the default 12px on all four sides. Add the following to your newly created HTML/CSS block.

HTML


<input type="checkbox" id="offcanvas-menu" class="toggle" />

<div class="container">

	<aside class="menu-container">

		<div class="menu-heading clearfix">
		
			<label for="offcanvas-menu" class="close-btn">
			
				<span class="sm-fonticon sm-fonticon-XCross2"></span>
				
			</label>
			
		</div><!--end menu-heading-->

		<nav class="slide-menu">
		
			<ul>
			
				<li><a href="/"><span class="sm-fonticon sm-fonticon-Home"></span>Home</a></li>
				
				<li><a href="https://www.imagesinthebackcountry.com/?p=1994"><span class="sm-fonticon sm-fonticon-User"></span>About Me</a></li>
				
				<li><a href="/Portfolio"><span class="sm-fonticon-small sm-fonticon-Portfolio"></span>Portfolio</a></li>

				<li><a href="https://gallery.imagesinthebackcountry.com/"><span class="sm-fonticon sm-fonticon-Gallery2"></span>Galleries</a></li>

				<ul class="sub-menu">

					<li><a href="/sub-link-one"><span class="sm-fonticon sm-fonticon-ArrowTriangleRight"></span>Sub Link One</a></li>

					<li><a href="/sub-link-two"><span class="sm-fonticon sm-fonticon-ArrowTriangleRight"></span>Sub Link Two</a></li>

				</ul>
				
				<li><a href="/browse"><span class="sm-fonticon sm-fonticon-View"></span>Browse</a></li>
				
				<li><a href="https://www.imagesinthebackcountry.com/?p=2036"><span class="sm-fonticon sm-fonticon-Mail"></span>Contact Me</a></li>

			</ul>
			
		</nav><!--end slide-menu -->

	</aside><!--end menu-container-->

	<section class="content">

		<label for="offcanvas-menu" class="full-screen-close"></label>

		<div class="menu right">
		
			<label for="offcanvas-menu" class="toggle-btn">
			
				<span class="sm-fonticon sm-fonticon-Menu"></span>
				
			</label>
			
		</div><!--end menu-->

	</section><!--end content-->
	
</div>

Unfortunately there is no way to automatically add links, so you will have to edit the above HTML code to match your website links.

Now, copy the following Common CSS to your site-wide theme’s custom CSS and NOT the CSS section of the newly created HTML/CSS. Some of the code just doesn’t work ther (I tried), so it has to go to your theme's custom CSS.

Common CSS


/**
 * Off-Canvas Navigation Menu
************************************************/
span.sm-fonticon:before,
span.sm-fonticon-small:before{margin-right:10px}

.sm-fonticon-Menu:before {font-size: 48px;}
.sm-fonticon-XCross2:before { font-size: 32px;}

.sm-page-content *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

.container,
.menu-container,
.sm-user-ui html, 
.sm-user-ui body {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

.content {width: 100%;}

.toggle, 
.full-screen-close {
	display: none;
}

.full-screen-close {
	width: 100%;
	height: 100%;
	position: fixed;
	cursor: pointer;
	top: 0;
	left: 0;
}

.toggle:checked + .container > .content .full-screen-close {
  	display: block;
  	background: rgba( 0, 0, 0, .5 );
	z-index:98;
}

.menu {	padding-top: 24px;}

.toggle-btn,
.close-btn {	
	cursor: pointer;
	margin: 1.5rem;
}

.toggle-btn {font-size: 2.25rem;	}

.close-btn {
	float: right;
	font-size: 1.5rem;
}
 
.content,
.menu-container { transition: margin 0.5s ease-in-out; }
	
.slide-menu li a {
	padding: 1.5rem;
	font-size: 1.125rem;
	text-transform: uppercase;
	font-weight: 600;
	display: block;
	transition: background-color .5s ease-in-out;
}

	.slide-menu li a:hover { background-color: rgba( 0, 0, 0, 0.9 ); }

.close-btn,		
.slide-menu li a { color: #ccc; }	

	.close-btn:hover,		
	.slide-menu li a:hover { color: #fff; }	

		
.sub-menu {margin-left: 25px;}		

@media ( max-width: 765px ) {

	.menu-container,
	.toggle:checked + .container > .menu-container {margin-top: -12px; }
	
	.slide-menu li a {
		font-size: 0.875rem;
		padding: 12px;
	}

	.slide-menu li span {
		font-size: 16px;
	}
	
}

If you want your Menu to be to the right like this example SmugMug Off Canvas Navigation Menu, add this under the CSS you just added.

Right Slide CSS


/* Right Slide */
.right{float: right;}

.toggle:checked + .container > .menu-container {margin-left: 60%;}

.menu-container {
	background: #151515;
	width: 40%;
	margin-left: 100%;	
	float: right;
	height: 100%;
	position: absolute;
	z-index:99;
}

If you want your Menu to be to the left like this example SmugMug Off Canvas Navigation Menu, add this under the CSS you just added.

Left Slide CSS


/* Left Slide */
.toggle:checked + .container > .menu-container { margin-left: 0;}

@media ( max-width: 765px ) {

	.toggle:checked + .container > .menu-container { 
		margin-left: -12px; 
	}
	
}

.menu-container {
	background: #151515;
	width: 40%;
	margin-left: -45%;	
	float: left;
	height: 100%;
	position: absolute;
	z-index:99;
}

Depending on your logo, you may need to adjust that block accordingly. My logo is 400px x 65px and I had to set my margin-top to -60px to center it.

As always, if you need assistance post your question at the D-Grin Forum.

Powered by SmugMug Log In