Hello readers we are back with another interesting article. This topic is based on the topic HTML and Javascript. Here we are also starting with the jQuery in this article. Hope all are doing well and safe please explore all the contents in our blog and support us.
The thing we are gonna code is fading side navigation. We
used HTML, CSS and jQuery to create this fading side navigation. First of all
the the side navigation will be hidden and only menu icon(3 horizontal lines)
will be visible. On clicking it the icon a fading side navigation bar will
appear. In the navigation bar a X will be present on clicking it the navigation
bar will fade out and the menu icon will appear again.
What does the navigation bar contain?
- Menu bar icon.
- Links to different pages of the blog.
- The title of the blog.
- Social media buttons.
Now let’s begin with the coding!!..
Video for better understanding.
In this article I have clearly mentioned the procedure to write the code. To help in more accurate manner I have made a video where I have coded it please go through the video for better understanding.
HTML:
Coming to the HTML part of the code first part is adding an image which contains the menu icon and setting it’s width according to our requirements and gave set it’s ID to “men”.
Next we created a div element and gave that a class name “content”. Inside the div element there are many links to various pages are included using the anchor tog.
The next part is including the closing button I gave it’s value to be ‘X’ so that it looks like a cross symbol which is suitable for the closing button.To this button the id is set to ‘cross’.
Next comes the adding of social media buttons. First the links for the social media butons are specified using the anchor tag and the icons are made using the <i> tag and inside the class attribute respective names are given. For including social media icons a css must be linked that is <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">. Here ends the HTML part.
CSS:
In CSS part the height of the body and HTML is set to 100%.
For the closing button i.e.X the margin is adjusted by setting the left
margin to 220px. The background color is set to 'Transparent' and 'border' to none.
Then for styling the anchor elements the text decoration iss
set to none and color to white and font type and font size are adjusted according
to the requirement. For the margin top work for the anchor element the display
should be set to inline-block.
Then for the content class the background color is
set to black, width to 250px and is is made to float left. You can make this
sticky by setting position to sticky.
Then for styling the social media icon the padding is set to 10px, font size to
15px, width to 20px , text decoration to none and background color is set
according to requirement.
jQuery:
First of all for the jQuery to work one should import
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
In the jQuery part on loading of the entire document we
write all the operations to be performed on the HTML document. All the
operations must be written with $('document').ready(function(){ code here});
First of all we make the content within the content
class to hide using the hide() function. So that only the menu icon will be
visible at first.
Then we added jQuery such that on clicking the element with
men ID a function is called. Inside this function we made the contents within
the content class to fade in slowly using the fadeIn() function
and hiding the menu icon.
Then on clicking the X button another function will
be called in which the contents in the content
class fill fade out slowly using fadeOut() function in which the menu will fade
out slowly and the menu icon will be
displayed.
Here are the codes:
HTML:
CSS:
jQuery:
Post a Comment