HomeworkLib
Question

I am writing an html site and need help with dropdown navigation bars. The navigation bar...

I am writing an html site and need help with dropdown navigation bars. The navigation bar should have dropdown menus to navigate around the site to different pages. The issue is that it cannot use div elements and while it can use javascript it would be highly preferred it did not. The home page is in its own directory as well as the css has its own directory and the web pages have their own directory. The navigation bar should have a Home link that does not drop down. It shouldnt rely on outside links to resources for css, styling and such should be basic css based only. Please no href links to some part of archive or something I just want a very basic drop down navigation bar.

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

nav.html

<html>
<head>
<title>Home</title><!--Title of the web page-->
<!--specifying the css that contain the properties to show the drodown navigation bar-->
<style>
    /* Properties of Navbar container */
    .navbar {
     overflow: hidden;     /*hide content when content overflows in navigation bar*/
     font-family: Verdana;
     background-color: #334;
    }

    /* Properties of dropdown container*/
    .dropdown {
     overflow: hidden;
     float: left;
    }

    /* setting a background color to navbar links on hover */
    .navbar a:hover, .dropdown:hover .dropbutton {
     background-color: #33a;
    }

    /* Properties of Links inside the navbar */
    .navbar a {
     float: left;      /*place content on the left side of its container*/
     font-size: 17px;
     padding: 14px 16px;
     text-decoration: none;
     color: white;       /*color of the link in nav bar*/
     text-align: center;
    }

    /* Properties of Dropdown button inside dropdown container*/
    .dropdown .dropbutton {
     font-size: 17px;
     border: none;
     outline: none;
     color: white;
     padding: 14px 16px;
     background-color: inherit; /*Inherit the background color from its parent*/
     font-family: inherit;
     margin: 0;
     background-color: #336;
    }

    /* setting dropdown content and set it to hidden by default */
    .dropdown-content {
     display: none;      /*hide the drop down content*/
     position: absolute;
     background-color: #fafafa; /*setting background color of ropdown content*/
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);    /*background shadow of dropdown content*/
     z-index: 1; /*specify the order of elements*/
    }

    /* properties of Links inside the dropdown content*/
    .dropdown-content a {
     float: none;
     color: black;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
    }

    /* setting a background color to dropdown links on hover */
    .dropdown-content a:hover {
     background-color: #dde;
    }

    /* setting to Show the dropdown menu on hover the dropdown */
    .dropdown:hover .dropdown-content {
     display: block;
    }

</style>
<!--End of style sheet-->
</head>
<body><!--body of the web page-->
<div class="navbar"><!--including the navigation bar in the page-->
<a href="#">Home</a><!--Link to home page, change the href with your page-->
<div class="dropdown"><!--main dropdown menu in navigation bar-->
   <button class="dropbutton">Drop-down<!--dropdown button in navigation bar-->
   </button>
   <div class="dropdown-content"><!--content of the dropdown menu-->
     <a href="#">News</a><!--Link 1 change it to your choice-->
     <a href="#">Article</a><!--Link 2 change it to your choice-->
     <a href="#">Search</a><!--Link 3 change it to your choice-->
     <!--In similar way you can include more links-->
   </div><!--end of drop down content-->
</div><!--end of drop down menu-->
<a href="#">About</a><!--custom link, you can either remove it or include a link in href-->
</div><!--end of navigation bar-->
</body><!--end of body-->
</html>

0 0
Add a comment
Know the answer?
Add Answer to:
I am writing an html site and need help with dropdown navigation bars. The navigation bar...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • I am writing an html site and need help with dropdown navigation bars. The navigation bar...

    I am writing an html site and need help with dropdown navigation bars. The navigation bar should have dropdown menus to navigate around the site to different pages. The issue is that it cannot use <div> and while it can use javascript it would be highly preferred it did not. The navigation bar should also point to an outside css file if possible.

  • Design an original, professional web site following the specifications listed below. This web sit...

    Design an original, professional web site following the specifications listed below. This web site will be for a business you plan to set up for yourself or for someone else. The following is a detailed list of the requirements for your web site. READ them carefully. Instructions - Web Site Requirements for the web site: General: You will thoroughly test all your pages in more than one browser. All links MUST work. All graphics must show on the page. All...

  • code a website in html about vacational about atleast 3 vacational spots. the requirements are as...

    code a website in html about vacational about atleast 3 vacational spots. the requirements are as follows Home page and at least 5 content pages A single external CSS file controlling styles across the site (internal and embedded styles may also be used when appropriate) Consistent "look and feel" throughout the site (logo, color scheme, layout, navigation) Consistent navigation throughout the site Use at least three images in addition to the logo (images should have alternate text) Include at least...

  • As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

    As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...

  • I know there are a couple of answers to this question already but they don't match...

    I know there are a couple of answers to this question already but they don't match the sample code we where given. Overview Images, both static and dynamic, appear on most Web sites. There are many different features and functionalities that we can add through the use of JavaScript, including preloading, rollovers, and cycling banner ads. In this assignment, you will work with JavaScript, images, events, and manipulating the DOM to create an interactive image gallery. Hint: Preloading your images...

  • For milestone #1, we will start the CARIT site with three static HTML pages and a...

    For milestone #1, we will start the CARIT site with three static HTML pages and a CSS file. Create a dedicated folder for this project. This folder should contain all related files in this project. The future milestones are cumulative and built directly on top of your prior work. Function/content requirements: A home page named “index.html”, which include these contents at least: Description of the center. You may reference the example sites. Latest news: use list tags; make up some...

  • the is my HTML and CSS code. I didn't attach the image or the CSS file...

    the is my HTML and CSS code. I didn't attach the image or the CSS file because of the space limit. two things I wanted to incorporate on this page are to make "MY TOP 3 MUSIC GENRES" blink using javascript and to make the video links autoplay using javascript both should be using javascript requirement: our professor told us not to use <div> or alert. thank you for your help <!DOCTYPE html> <!-- I used w3school for the formatting...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • i need help with this homework webpage and code too: The webpage must include: Global Structure...

    i need help with this homework webpage and code too: The webpage must include: Global Structure Tags Text Tags Images   Your first page must be named index.html Include a table within your site, challenge yourself to add a header in the table, and choose interesting border and/or cell formatting. Include a hyperlink within your site. Include an image in your site. Include a form in your site to demonstrate understanding of a variety of form components (the form does not...

  • Create an HTML5 page that contains a form to collect the following data. The text in...

    Create an HTML5 page that contains a form to collect the following data. The text in bold indicates the id value that should be assigned to each html control: Product (drop down list) product – iPad, iPhone 6S, Galaxy 5S, Moto X, and so on Quantity (number) quantity Unit price (number) unit_price Discount (%)(number) discount_rate Date (date)   order_date First Name (text box)   first_name Last Name (text box)   last_name Payment type (drop down list)   payment_type – Visa, Master, Discover, Amex, and...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT