Skip to content
  • home
  • portfolio
  • web design journal
  • blog
    • adventure
    • san diego
    • projects
    • website design
Blog Web Dev A Simple Slideout Menu

A Simple Slideout Menu

By Forrest Smith - Drempd.com

I just wanted an easy slideout menu.  Click on a link, and the menu slides out from the left side of the screen.  Click on the link again, or somewhere else on the page, and the menu slides back in.  Here it is:

HTML Code

data-openwidth is the width in pixels of however wide you want the menu to be when opened.

Menu Content Here

CSS Code:

	  .slideout-content {
		display: none;
		z-index: 1999;
		position: fixed;
		top: 0;
		bottom: 0;
	  }	 	

Javascript Code:

$(document).ready(function () {
    $('#idOfOpenLink').click(OpenMenu);
});

$(document).mouseup(function (e) {
	var container = $(".slideout-content");
	var openWidth = container.attr('data-openwidth') || 300;

	//If the user clicks off the menu, close it
	//This checks to make sure the user didn't click the menu, or a child element:
	if (!container.is(e.target)  && container.has(e.target).length === 0 && container.is(":visible")) {
		MenuSlide_In(container, openWidth);
	}

});

function MenuSlide() {
	
	var container = $(".slideout-content");
	var openWidth = container.attr('data-openwidth') || 300;

	if (container.is(":visible")) {
		MenuSlide_In(container, openWidth);
	}
	else {
		MenuSlide_Out(container, openWidth);
	}
}

function MenuSlide_In(container,openWidth) {
	container.css({ width: openWidth + 'px' }).show().animate({
		width: '0px'
	}, 500, function () {
		container.hide();
	});
}

function MenuSlide_Out(container, openWidth) {
	container.css({ width: 0 }).show().animate({
		width: openWidth + 'px'
	}, 500, function () {
	});
}


Posted on December 18, 2015August 26, 2022 in Web Dev
  • Adventure

    • adventure
    • gravelgrinding
    • hiking
    • running
  • The Built Environment

    • architecture
    • urbanity
  • Locations

    • san diego
    • portland
  • Freelance Life

    • freelancing
    • productivity
  • Web Dev

    • css
    • entrepreneurship
    • git
    • handlebars
    • html
    • inkscape
    • photoshop
    • php
    • sass
    • web design
    • web development
    • saphire

drempd | san diego, ca


home contact

adventures san diego urbanity and architecture projects stream website design

portfolio resume san diego web design freelance web designer

custom web design responsive web design website maintenance