Mozilla campus club challenge: Resolved navigation bar issue #96 #204
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolved Issue #96
Description
The navigation bar will now appear as:
Activities | Club's Corner | About
where under "Club's Corner" the following sub-pages will be displayed:
Get Started | Resources | Connect | Report | FAQ
Implementation Details
Apart from HTML code, I have also added a Js script and two CSS class definitons. The script contains the event handlers when cursor clicks or hovers over "Club's Corner". The latter is for styling the drop-down menu and drop-down menu items.
When the main navigation bar is not collapsed, then I have added event handlers which upon hovering over "Club's Corner" will fill in an empty "<div>" section with HTML code to display a new navigation bar below the main one and set the 'hidden' attribute to 'false' for the tag that displays the drop-down menu on clicking on "Club's Corner".
When the main navigation bar is collapsed, then I have set the 'hidden' attribute to 'true' for the tag that displays the drop-down menu on clicking on "Club's Corner".
*Note: The drop-down menu cannot be formed to the left of "Club's Corner" as it is embedded within a "nav-bar". This issue has been resolved in the latest version of Bootstrap.
Screenshots
Screenshot-1: When main navigation bar is not collapsed.
Screenshot-2: When main navigation bar is not collapsed and mouse has hovered over "Club's Corner".
Screenshot-3: When main navigation bar is collapsed.
Screenshot-4: When main navigation bar is collapsed and cursor has clicked on "Club's Corner".
How to run
Build the project as usual and the new header will be added to all the web-pages automatically.
Checklist