Today, I have completed the general navigation bar structure, by following the video that was mentioned before. Afterwards, I modified some aspects of the code that would improve it specifically for my website.
First of all, I changed the <div> for the navigation bar. In my previous code, it looked like this:
This seemed a bit unnecessary as I would only be having 1 navigation bar per page. Therefore, I shortened it to this in the HTML and the CSS documents:
This would make things simpler and also avoid clustering of code in the document, as less text is used.
The next thing I did, was remove these <ul> (unordered list) and <li> (list item) tags. Again, it was unnecessary since just using the <a> tags was enough to create the navigation bar. Here is the outcome:
Again, this would be alot more visually minimal, while giving the same outcome.
Then, the next thing I changed was the drop-down menus. Here is what it looked like when I followed the video that I used to create the basic structure of my menu bar:
This seems suitable in the html document, but when I go over to the CSS document, everything would be confusing. An example of what I mean is:
As seen here, this tag in the CSS document is used to edit the drop-down menu characteristics, as a whole (the 2nd <ul> in the css document snapshot is the <ul> tag in the html snapshot above). This would be very confusing in the future when I try to edit this website, therefore I had to sort out this problem quickly before it got out of hand. Here was my solution:
As seen here, it would be alot more clear in the CSS document, as to which part of the website a specific CSS code was referring to since they have their own separate names. Here is what it looks like on my CSS document:
This tag would clear the possible confusion that might happen in the future, in case we (me and my client) needed to edit something in the website, as they all have their own separate names to show what they mean.
In the CSS document, other modifications include using rounded edges and adding a border around my menu bar. Here is the code for both modifications:
This is the code for the <nav> tag in CSS. The display is changed to flexbox, and I added a 20px margin to make sure that it doesn't fill up the whole page. The width can change for every monitor with the minimum as 40px
, and I changed the background color to black and text to white. The height is 58px, so it doesn't take up the whole page. I then made the text bold so it can be easily seen. The border is 3px, since it would be changed to another color when the mouse pointer hovers over it ,therefore it can't be seen now. The border-radius creates a curved edge around my document, which fits the design plan that me and my client have developed.
This code would chagne the border to an orange color when the mouse hovers over the navigation bar.
I also added an animation, that I believe we (me and my client) will both agree on since the visual appeal of the website is increased. To do so, I used the transition-property tag, as the max-height of the dropdown menu was originally 0px. When I hovered over them, the max-height would change from 0px to 1000px, leading to the dropdown menu showing. This would create the drop-down menu. To also make the transition, I used transition-property to animate it. I did so by animating the max-height function, therefore allowing the smoother transition.
The max-height of the nav-dropdown <div> was changed, so that when the menu bar was not hovered it would not show the other options. The animation was added here by the transition-property as the change in max-height would be animated. The overflow is hidden, since the dropdown menu text shouldn't be visible when the specified menu isn't hovered upon.
This is what causes the menu bar options to show. The max-height changes to 1000px when the selected menu option is hovered upon, therefore showing the different options.
By using :before and :after, the transition-duration can be customized and changed to the liking of the client. It is set as 0.3 seconds for now, but can be changed if we (me and my client) agree that it might be too long or short. The transition-property here is set as none, since nothing else should have the transition apart from the drop-down menu.
Lastly, I also used photoshop to make the logo that was put in the navigation bar. I chose to use this program to design the logo for my client, because it provides various options to create/modify the logo. Through verbal conversation, me and my client decided to use a text logo for the company's webpage. I create the logo using a simple font and placed it as a red color. Here is what the navigation bar looks after completion:
No comments:
Post a Comment