Mobile Menus

Press the down arrow or spacebar to view

Mobile Menus

We can use CSS3 to make a nifty mobile menu!

We know:

1. About absolute positioning
2. About animations using transition
3. About the viewport width (vw) unit
4. About max-width and max-height
5. About hiding elements at different breakpoints
6. A lot! (good job! 👍 )

We need to know:

1. About the checkbox <input>s, <label>s, and the :checked selector
2. About sibling selectors

The checkbox <input>

The <input> element specifies an input field, usually in a form

Use the type="checkbox" attribute to make a checkbox:

	<input type="checkbox" />
					

Why a checkbox?

Because we can use the :checked selector as an animation trigger state!

If it's checked, we'll show the mobile menu

The checkbox <input>'s <label>

						<label>Toggle the checkbox!</label>
					

The <label> element is used for labeling form elements, and is the clickable text for toggling a checkbox

To link a label with a checkbox, use the for="" attribute. The for value should be the same as the checkbox's id value, for example:

<input type="checkbox" id="toggler" />
<label for="toggler">Toggle the checkbox!</label>
					

Sibling Selectors

In the HTML, we'll place our checkbox before the menu's <ul>

Then, in the CSS, we'll show the <ul> if the checkbox is checked — we can do this with a sibling selector!

.our-checkbox ~ .our-unordered-list {
    max-height: 0;
}
					

The above targets an element with class our-unordered-list if it is preceded by a sibling element with class our-checkbox

Putting It All Together

Now that the label is clickable, we don't need to see that ugly checkbox — hide it with display:none;

We're going to use max-height:0; and overflow:hidden; on the before state of our navigation menu's <ul>

When the box is checked, we'll animate max-height to become 100vh.

Let's Develop It!

Let's make a mobile menu!

CSS for reference »

Masonry Layouts

Press the down arrow or spacebar to view

Properties:
column-count and column-gap

Masonry layouts have become popular lately, largely thanks to sites with infinite scrolling such as Pinterest

Now we can make them much more easily with CSS3!

.masonry {
    column-count: 3;
    column-gap: 3;
}
					

column-count and column-gap also need vendor prefixes — check shouldiprefix.com!

Bricks

Each item in a masonry layout is usually called a brick and has some additional styling:

.brick {
    display: inline-block;
    width: 100%;
    margin: 0 0 1em 0;
}
.brick img {
    width: 100%;
}
					

Masonry Layout Demo

See the Pen CSS Masonry Layout by Liz Shaw (@anythingcodes) on CodePen.

Feel free to copy this to your diet.html page!

Opacity and Shadows

Press the down arrow or spacebar to view

Animation Recap

• Add transition to the before state
• Remember: transition accepts two values,
  the CSS property and the duration of the animation

selector {
    width: 100px;
    transition: width 2s;
}
								

	selector:hover {
		width: 500px;
	}
								

Animating Multiple Properties

To animate multiple properties, separate each effect with a comma

selector {
    transition: width 2s, background 5s;
}
					

Animating Multiple Properties

Method 2: All Properties

Use all to seamlessly transition all properties from before to after states at the same duration

selector {
    transition: all 3s;
}
						

Property: box-shadow

The box-shadow CSS3 property is often used to give a 3D effect when an element is hovered over

selector {
    box-shadow: horizontalShadow verticalShadow blurDistance color;
    box-shadow: 10px 10px 5px grey;
}
					

Don't worry about memorizing this — use a generator instead!

Property: opacity

opacity changes the opacity of the whole element

selector {
    opacity: 0.5;
}
					

The value can be a number between 0 (translucent) and 1.0 (opaque)

opacity in Hover States

opacity is commonly used in hover states to reveal transparent content

Let's Develop It!

You may have noticed that one of these things is not like the other. That's because one is a hover state!

Let's animate multiple properties (for example, box-shadow and opacity) for the hover states in the About section.

Bonus Material:

Getting Your Site Online

Press the down arrow or spacebar to view

Method 1: GitHub

GitHub is free and a great intro to version control

A version control system records changes to a file or set of files over time so that you can keep track of changes and roll back to previous revisions

Almost every web agency uses a version control system

http://anything.codes is hosted for free on GitHub! See?

Method 1: GitHub

1. Create an account on GitHub.com
2. Download GitHub Desktop, then open it and login
3. Click the plus sign and, under the Add tab, browse to the project folder you used for this class
4. An error message will display; click create a repository
5. Change the Name to yourusername.github.io (substitute yourusername with your GitHub username)
6. Click Create repository (Don't worry about changing Local path or Git ignore)

Method 1: GitHub

7. Click Changes, where you should see a list of project files.
8. Enter a Summary and click Commit to master
   

Method 1: GitHub

9. Click Publish at the top, making sure Name is in the correct format (yourusername.github.io, except with your username)
10. Within a few minutes, your site will be live at http://yourusername.github.io (substituting your GitHub username for yourusername). Check it out!
11. Any time you make changes to your project files, open GitHub Desktop, Commit (step 8) and then click the button to publish your changes.

Method 2: Hosting + Domain

There are two paid services involved:

1. Web Hosting: A computer (a.k.a. server) where your site's files are located, which is visible to the outside world using a browser
   • To publish changes to your site, you upload individual files from your computer to the server using a File Transfer Protocol (FTP) program such as Filezilla
   • The web hosting company will give you FTP info
2. Domain Name: The name you type in to the browser (e.g. anything.codes or girldevelopit.com)
   • Buying a domain is often called registering, so companies that sell domain names are often called Domain Name Registrars

Method 2: Hosting + Domain

You can buy hosting from one company and a domain name from another, but it's usually less of a hassle to buy both from the same company

I use 1&1's Starter package, since it includes hosting and one domain name

When it comes to hosting, don't be fooled by the extra bells and whistles — if you aren't sure what something is, you probably don't need it

Method 2: Hosting + Domains

Why are there two separate services?

First, your files need to be stored on a web host, which is a computer (a.k.a. server)

When you register a domain, it doesn't 'point' to the server where your files are located

This is why your web host may give you a Domain Name System (or DNS) address, which is the IP address of the computer (a.k.a. server) where your files are located

The Domain Name System (DNS) is a huge list that links your domain name (e.g. anything.codes) to where your files are located (using the IP address of the server where your files are located)