Vertical Navigation Bar
This vertical navigation was created by utilizing functions within CSS. By giving the navigation an ID in html I was able to point to that specific section of the page in HTML. I also broke down which customizations I wanted to make by limiting the changes to the different areas within the navigation such as the ul and li tags. I then utilized different settings to get it to look the way it does such as how to align it on the page and which colors to use. A vertical navigation can be useful in many different situations but the main use case is when you want a sidebar menu on your webpage.
CSS Drop Down Menu
I started with an HTML structure that included an unordered list representing the menu items, and nested lists within list items for submenus. Each list item contains an anchor element representing a menu item. I Applied CSS styles to format the menu's appearance, setting the submenus initially to be hidden using CSS display: none;, and used CSS selectors like :hover to trigger the display of submenus when hovering over a parent menu item.
Navigation Bar Tabs
I created this tabbed navigation with HTML and CSS to provide an organized and visually appealing way to navigate through the website. The design is used to enhance user experience and accessibility. When choosing the colors for the tabbed navigation, I opted for a muted color palette with shades of gray for the text and a gradient background that transitions from a lighter blue-gray to a darker green-gray. These colors were chosen to maintain readability while adding a touch of visual interest. Tabbed navigation is a valuable design element on websites with multiple sections or pages that need to be logically organized. It simplifies the user's ability to switch between different content areas quickly, promoting a seamless browsing experience. This design choice is particularly useful on websites with a range of topics or services, such as e-commerce sites, news portals, or educational platforms, where clear and accessible navigation is essential for user engagement.