Generate mobile navigation

Developer
T.J. Fogarty
Size
3,515 Kb
Views
10,120
  1. Generate mobile navigation Previews
  2. Generate mobile navigation HTML Codes
  3. Generate mobile navigation CSS Codes
  4. Generate mobile navigation JS Codes

How do I make an generate mobile navigation?

Probably not best practice to rely on JavaScript for this, but it was something fun to play around with. You just pass any number of menus within navContainer and it'll generate dropdown menus for you. It'll also detect the url of the page and set the correct option to 'selected'.. What is a generate mobile navigation? How do you make a generate mobile navigation? This script and codes were developed by T.J. Fogarty on 08 November 2022, Tuesday.

Generate mobile navigation Previews
IQ Test

Generate mobile navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Generate mobile navigation</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { background: #ebebeb;
}
.wrap { width: 600px; margin: 0 auto;
}
.button { display: block; text-decoration: none; background: #ff6700; color: #fff; width: 200px; margin: 10px auto; text-align: center; padding: 5px; border-radius: 2px; transition: background ease 0.2s;
}
.button:hover { background: #00a287;
}
nav ul { margin: 0; padding: 0; list-style: none;
}
.ancillary-menu li,
.main-menu li { display: inline-block;
}
.ancillary-menu a {
}
.main-menu { margin-top: 30px;
}
.main-menu a { text-decoration: none; text-transform: uppercase; color: #333; font-size: 20px; padding: 3px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrap"> <a href="" class="button create-mobile-nav">Create Mobile Navigation</a> <nav class="ancillary-menu"> <ul> <li><a href="">Ancillary 1</a></li> <li><a href="">Ancillary 2</a></li> <li><a href="">Ancillary 3</a></li> </ul> </nav> <nav class="main-menu"> <ul> <li><a href="">Main 1</a></li> <li><a href="">Main 2</a></li> <li><a href="">Main 3</a></li> <li><a href="">Main 4</a></li> <li><a href="">Main 5</a></li> </ul> </nav>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Generate mobile navigation - Script Codes CSS Codes

html { background: #ebebeb;
}
.wrap { width: 600px; margin: 0 auto;
}
.button { display: block; text-decoration: none; background: #ff6700; color: #fff; width: 200px; margin: 10px auto; text-align: center; padding: 5px; border-radius: 2px; transition: background ease 0.2s;
}
.button:hover { background: #00a287;
}
nav ul { margin: 0; padding: 0; list-style: none;
}
.ancillary-menu li,
.main-menu li { display: inline-block;
}
.ancillary-menu a {
}
.main-menu { margin-top: 30px;
}
.main-menu a { text-decoration: none; text-transform: uppercase; color: #333; font-size: 20px; padding: 3px;
}

Generate mobile navigation - Script Codes JS Codes

var $createMobileNav = $( '.create-mobile-nav' ), MobileNav = { navContainer: $( '.main-menu, .ancillary-menu' ), navItems: null, select: null, navHTML: "<select class=mobile-nav></select>", optionHTML: null, init: function() {	// Build navigation then attach event handlers	MobileNav.buildNav();	MobileNav.bindUI(); }, bindUI: function() {	$( '.mobile-nav' ).on( 'change', MobileNav.events.goToPage ); }, buildNav: function() {	var navItemLength = 0,	href = null,	text = null,	$link = null;	// Should work for multiple navigations on a single page	// Just add a selector to navContainer	$.each( MobileNav.navContainer, function(i, el) {	var $this = $( this );	MobileNav.navItems = $this.find( 'a' );	navItemLength = MobileNav.navItems.length;	$( MobileNav.navHTML ).insertBefore( $this );	// The [i] lets us select the current nav we're working on	// so all links belong to the correct navigation	MobileNav.select = $( '.mobile-nav' )[i];	// Reset optionHTML incase there are other navigation elements to rebuild	MobileNav.optionHTML = '';	// Build the <option>'s HTML to append to the <select>	for (i = 0; i < navItemLength; i++) {	$link = $( MobileNav.navItems[i] );	href = $link.attr( 'href' );	text = $link.text();	MobileNav.optionHTML += "<option value='" + href + "'>" + text + "</option>";	}	$( MobileNav.optionHTML ).appendTo( MobileNav.select );	});	// Once done, remove the old navigation and set the current page where applicable	MobileNav.navContainer.remove();	MobileNav.setCurrentPage(); }, // Find the url, and the matching on in the main navigation and set as selected option setCurrentPage: function() {	var currentPage = window.location.pathname;	$( "option[value='" + currentPage +"']" ).prop( 'selected', true ); }, events: {	// go to a link when the user changes the navigational <select> element	goToPage: function() {	var selected = this.options[ this.selectedIndex ];	if( selected.value ) {	window.location = selected.value;	}	} }
};
// Kick things off, maybe if $(window).width() < 768 or something
$createMobileNav.on( 'click', function(e) { e.preventDefault(); MobileNav.init();
});
Generate mobile navigation - Script Codes
Generate mobile navigation - Script Codes
Home Page Home
Developer T.J. Fogarty
Username tjFogarty
Uploaded November 08, 2022
Rating 3
Size 3,515 Kb
Views 10,120
Do you need developer help for Generate mobile navigation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

T.J. Fogarty (tjFogarty) Script Codes
Name
Cat-scading Style Sheets
Accordion
Expanding Navigation
Hexagon grid - Stage 1
Sass - Active navigation
Loading bar
Toggle content
Notify
Simple grid with Sass
Loading Spinner
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!