Category: Student Tutorials

I chose to create a dropdown menu using CSS. The menu should have a list of links that appear when you hover over the parent div. You can make the menu have as many links as you like. When you hover over each option, the background color should change as an indicator of which link you are about to click.

HTML
Make a parent div to hold everything- the main button and all the links that will appear when you hover over it. Mine is called “dropdown”.

Inside that div, make a button that will contain all of the links. Mine is called “menu”.

Also inside the parent div, but not inside the button, make a div that is the parent of all links that appear when you hover over the button. Mine is called “dropdown-content”.

Inside this div, create as many links to other pages as you want using .

Close all divs by using two

tags. This is all of the HTML needed.

CSS
Start your CSS with an id for your button. In this case, mine would be #menu. Use an id because it is unique. This is the only element that is visible at all times. Style it with background colors, changes to the text, and any other changes you like. How the button looks does not impact the functionality of the dropdown menu.

Next in your css, make a class for the div that holds all of your links. Mine is .dropdown.content. Add display:none to hide all of this until you hover over it. Add a width and background color.

Add .dropdown-content a. Adding “a” means these declarations will only affect links. Style the links however you want, but be sure to add display:block. Adding text-decoration:none stops the links from having an underline or color change when clicked.

Next, add the rule .dropdown-content a:hover. This will only make changes to the content when you hover over it. You can add a color change here so that each link’s background changes when you hover.

The final rule will be dropdown:hover .dropdown-content. Add the declaration display:block. Without this, the dropdown menu does not appear on hover.

http://mediaweb.rmu.edu/~djsst266/demo/fullscreen.html

Hey all, here’s a solution for a fullpage image background I found in the wild (in a chrome new tab replacement called ‘Momentum’).

It’ll work best for situations when you only need one pane/screen-worth of space. The benefit is that it seems to maximize the amount of image visible.

It works by grabbing each end of the div and stretching it to the edge of the screen.

If you really need to use it for multiple panes, change the ‘top’ attribute of each page to [(page number – 1) * 100vh], so page 1 is top:0; page 2 is top:100vh; page 3 is top:200vh; etc.

Here’s the code.

#fullscreen {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-image: url(mountains.jpg);
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
}

Hi all! I put together a video tutorial for completing the challenge I made and other static (not moving) challenges. It’s roughly 45 minutes long, and talks about a technique for rapid development.

The core principle is to Approximate in your editor, Refine in Chrome (or Firefox), and Copy back to your editor. As you practice iterating (building versions), you’ll get much faster at designing these.

You can find this video and more on my page. If you have any questions, comments, or things you want me to cover in the future, just email me.

https://www.youtube.com/watch?v=e9uzIaCSZWU