Building a Menu

In building the new Chaffey Building Group website, the design naturally included a responsive menu.  I opted to use Flexbox as the main way to layout the menu.

The design calls for two menus. The first menu is the main site navigation and the second contains the social media links.

To get started, let’s take a look at the HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="nav-container flex-container">
	<nav id="site-navigation" class="main-navigation">
		<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
			<span class="screen-reader-text">Toggle Navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<div class="menu-main-menu-container">
		<ul id="primary-menu" class="menu nav-menu" aria-expanded="false">
			<li id="menu-item-5086" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-5086"><a href="#">New Homes</a>
				<ul class="sub-menu">
					<li id="menu-item-5091" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5091"><a href="https://chaffeybuildinggroup.com/eastside/">Eastside</a></li>
					<li id="menu-item-5094" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5094"><a href="https://chaffeybuildinggroup.com/seattle/">Seattle</a></li>
					<li id="menu-item-5095" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5095"><a href="https://chaffeybuildinggroup.com/sold-eastside/">Sold</a></li>
			</ul>
		</li>
		<li id="menu-item-5090" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5090"><a href="https://chaffeybuildinggroup.com/custom-homes/">Custom Homes</a></li>
		<li id="menu-item-5100" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-5100"><a href="#">About Us</a>
			<ul class="sub-menu">
				<li id="menu-item-5087" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5087"><a href="https://chaffeybuildinggroup.com/about-us/">About Us</a></li>
				<li id="menu-item-5088" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5088"><a href="https://chaffeybuildinggroup.com/cbg-news/">CBG News</a></li>
			</ul>
		</li>
		<li id="menu-item-5093" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5093"><a href="https://chaffeybuildinggroup.com/meet-the-team/">Meet the Team</a></li>
		<li id="menu-item-5096" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5096"><a href="https://chaffeybuildinggroup.com/we-buy-land/">We Buy Land</a></li>
		<li id="menu-item-5089" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5089"><a href="https://chaffeybuildinggroup.com/contact-us/">Contact Us</a></li>
	</ul>
</div>			
</nav><!-- #site-navigation -->
<nav class="social-naviation">
	<div class="menu-social-menu-container">
		<ul id="social-menu" class="menu">
			<li id="menu-item-5105" class="social facebook menu-item menu-item-type-custom menu-item-object-custom menu-item-5105"><a target="_blank" href="https://www.facebook.com/ChaffeyBG/" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></li>
			<li id="menu-item-5106" class="social twitter menu-item menu-item-type-custom menu-item-object-custom menu-item-5106"><a target="_blank" href="https://twitter.com/ChaffeyBG" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a></li>
			<li id="menu-item-5107" class="social instagram menu-item menu-item-type-custom menu-item-object-custom menu-item-5107"><a target="_blank" href="https://www.instagram.com/chaffeybuildinggroup/" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></li>
			<li id="menu-item-5104" class="social houzz menu-item menu-item-type-custom menu-item-object-custom menu-item-5104"><a target="_blank" href="https://www.houzz.com/pro/chaffeybuildinggroup/chaffey-building-group" rel="noopener noreferrer"><i class="fab fa-houzz"></i></a></li>
		</ul>
	</div>			
</nav>
</div>

The top level container has the class flex-container which sets the display to flex. As in MODERN CSS – PART 1, I run a Grunt task that uses the SCSS pre-processor for CSS along with post-css autoprefixer.  This allows me to write simple rules without worrying about the correct format for older versions of Flexbox.

1
2
3
4
	.flex-container {
		display: flex;
		flex-wrap: wrap;
	}

Setting the top level container to display:flex, turns the nav elements into flex items.  This results in two flex items for every screen size.

Small Screen

Chaffey Building Group Small Screen Menu

On a small screen, the main navigation unordered list (ul element)  is hidden so I end up with the button (hamburger menu toggle)  and social navigation visible.

Mid Size Screen

Chaffey Building Group Medium Screen Menu

On a mid sized screen, I hide the button (hamburger menu toggle) and display the main navigation unordered list.  Again there are two flex items.

I set the flex basis of the main navigation to 100% so it forces the social navigation to wrap below it. I also set the text to align in the center:

1
2
3
4
.main-navigation {
	flex-basis: 100%;
	text-align: center;
}

On a large screen, both nav bars can be displayed side by side so the flex basis is changed to auto and the text is left aligned:

Large Screen

Chaffey Building Group Large Screen Menu
1
2
3
4
.main-navigation {
	flex-basis: auto;
	text-align: left;
}

For more posts on modern css please see Modern CSS – part 1 and Modern CSS – part 3.