Line 2: | Line 2: | ||
<!-- This will be the location for all common elements on the website --> | <!-- This will be the location for all common elements on the website --> | ||
+ | <header> | ||
+ | <nav> | ||
+ | <ul class = nav-list> | ||
+ | <div id = brand-elements> | ||
+ | <li><a href = "index.html" title = "Go to Homepage"><img src = Resources/Logo_With_Pink.png width = 35%></a></li> | ||
+ | </div> | ||
+ | <div id = nav-elements> | ||
+ | <li id = home-link><a href = "index.html" title = "Go to homepage">home</a></li> | ||
+ | <li class = drop-link id = about-drop-link><a>about</a> | ||
+ | <ul class = dropdown-content id = about-dropdown-content> | ||
+ | <li><a href = "about.html" title = "Read about me">About Me</a></li> | ||
+ | <li><a href = "" title = "View my career">My Career</a></li> | ||
+ | <li><a href = "" title = "Read frequently asked questions">FAQ</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class = drop-link id = product-drop-link><a href = "products.html">products</a> | ||
+ | <ul class = dropdown-content id = product-dropdown-content> | ||
+ | <li><a href = "digital-art.html" title = "View Digital Art">Digital Art</a></li> | ||
+ | <li><a href = "embroidery.html" title = "View Embroideries">Embroidery</a></li> | ||
+ | <li><a href = "" title = "View Greeting Cards">Greeting Cards</a></li> | ||
+ | <li><a href = "" title = "View Paintings">Paintings</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class = drop-link id = contact-drop-link><a href = "">contact</a> | ||
+ | <ul class = dropdown-content id = contact-dropdown-content> | ||
+ | <li><a href = "" title = "Contact me">Contact Me</a></li> | ||
+ | <li><a href = "" title = "View my social media">Get Social</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </div> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | |||
+ | <!--<script> /* makes the dropdown menus the same width as the dropdown "button". could not use width 100% */ | ||
+ | function dropdownWidthAdjustment(){ | ||
+ | var aboutWidth = document.getElementById("about-drop-link").offsetWidth; | ||
+ | aboutWidth = aboutWidth.toString(); | ||
+ | aboutWidth = aboutWidth + "px"; | ||
+ | document.getElementById("about-dropdown-content").style.width = aboutWidth; | ||
+ | var productsWidth = document.getElementById("product-drop-link").offsetWidth; | ||
+ | productsWidth = productsWidth.toString(); | ||
+ | productsWidth = productsWidth + "px"; | ||
+ | document.getElementById("product-dropdown-content").style.width = productsWidth; | ||
+ | |||
+ | var contactWidth = document.getElementById("contact-drop-link").offsetWidth; | ||
+ | contactWidth = contactWidth.toString(); | ||
+ | contactWidth = contactWidth + "px"; | ||
+ | document.getElementById("contact-dropdown-content").style.width = contactWidth; | ||
+ | } | ||
+ | </script>--> | ||
+ | |||
+ | </header> | ||
Revision as of 21:07, 29 May 2020