HTML Page with Side Drop Down Menu - renikita/using-cascade-tables GitHub Wiki
This is a simple HTML page that includes a side drop down menu. The menu includes five items: Edit, Favorites, History, Security, and Settings. When you hover over an item in the menu, its background color changes.
The HTML file includes a table with content on the right side of the menu. The table includes several sections about Lorem ipsum text. The text is just placeholder text used to fill spaces in a design.
The HTML file starts with <!DOCTYPE html> indicating the document type. The <html> element wraps the entire content of the page. Inside, there are two main elements:
The menu is a <div> element that contains all of the menu items. Each item has an <a> tag that wraps an image and a span element with a description of the item.
This section contains the rest of the web page's content that is a set of paragraphs.
All of the styling for the page is done through CSS code. There are several rules in this code that style each part of the web page. For instance, .textmenu, .item, and .maintext classed styled the header for the menu, each item in the menu, and the main content, respectively. Other classes, such as .capslock or .text, style specific headers and paragraphs in the main content.
To view this application, save the HTML and CSS code into two separate files (e.g, index.html and style.css) into your preferred folder. Double click on index.html to launch the page in your browser. You should now see the menu and the main content. Hovering over an item in the menu should change its color and display its description.