Using CSS Lists And JavaScript To Create Navigation Schemes
Using Css Html Lists And Javascript Create The Navigation Schemes F
Using CSS, HTML lists, and JavaScript, create the navigation schemes for your Web site. You may not use tables for your navigation scheme. You should use a JavaScript library, such as jQuery or Prototype, to help build your navigation scheme. Add the navigation to the Web site that you created or modified in Units 2 and 3. Be sure to test the navigation in one or more browsers to ensure that it is fully functional.
Using Dreamweaver and your redesigned Web site, create a section page for your site redesign project. The section page must contain at least 2 columns (see reference above). The section page must also contain the site navigation scheme customized for the particular section. For example, if you created the Sports section, then you should slightly alter the Sports button image or text and deactivate the link in the navigation. Create links both to and from your front page and section page.
Create 2 story pages, and make sure that they link back to the section and front pages. One story page should contain a video. You may embed a YouTube video (see the reference above). The other story page should contain a title and a text article formatted with CSS and an animation located somewhere on the page. Use the Web resources to find an appropriate animation example (see the resources above). Use any available text editor.
Paper For Above instruction
/ Basic Reset and Styling /
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/ Navigation styling using HTML lists /
nav {
background-color: #333;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
/ Hover effect for navigation links /
nav a:hover {
text-decoration: underline;
}
/ Styling for the section pages /
.section-container {
display: flex;
flex-wrap: wrap;
margin: 20px;
}
.column {
flex: 1;
min-width: 200px;
padding: 10px;
}
/ Styling for story pages /
.story-page {
padding: 20px;
}
/ Animation styling /
.animated-text {
font-size: 24px;
color: #2c3e50;
margin-top: 20px;
opacity: 0;
transition: opacity 2s ease-in-out;
}
.animated-text.show {
opacity: 1;
}
// Document ready function for navigation interactions
$(document).ready(function() {
// Example: Animate the text when page loads
$('.animated-text').addClass('show');
// Implementing navigation toggle for dropdowns if needed
// Example: collapsible menu logic can be added here
});
My Website
Welcome to My Website
This is the front page of the website. Use the navigation above to explore different sections and stories.
Sports Section
Latest Sports News
Highlights from recent sporting events.
Upcoming Events
- Football Match: Saturday
- Marathon: Sunday
Exciting Sports Victory
Watch footage of the recent championship game.
Community Marathon Highlights
This article recounts the community marathon event held last weekend.
// Additional scripts can be placed here
// For example, controlling animations or navigation enhancements