Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Articles by Aman Kumar
Page 2 of 4
How to create a collapsible sidebar menu with CSS and JavaScript?
A collapsible panel is a basic container coach view that creates a section area that can contain other controls. This section can be lengthy or collapsed to show hide data. To create a collapsible sidebar menu, we need HTML, CSS, and javascript. A collapsible sidebar will collapse along with the main page. In simple words, it means the menu bar is displayed on the page with its respective width; and main content of the page takes a minimum margin to display on the page. Following are the steps to be followed to create a collapsible sidebar menu. In this example, ...
Read MoreHow to create a curtain navigation menu with CSS and JavaScript?
In this article, we will learn how to create a curtain navigation menu using HTML, CSS and JavaScript. The curtain navigation menu will overlay on the entire screen by pushing back the current page. These menus display the sub−links of a link to make the navigation more specific. To create curtain navigation, we have to do the same as we had done earlier. In curtain navigation, we have two buttons one is an open button (menu) and the other one is a close button (cross). When you click on the open button the navigation will be visible on the screen ...
Read MoreHow to create a top navigation menu for smartphones / tablets with CSS and JavaScript?
In this article, we are going to discuss how to create a top navigation menu for smartphones / tablets using CSS and JavaScript. A navigation bar is usually the first pit−stop for the users visiting the website who seek guidance to walk through the website. It contains the list of elements present in your website; including the links to navigate through the website. To create a top navigation menu for smartphones and tablet it is easy, first we have to create a navigation menu page add media query inside the CSS. If width of the devices is less than 600px ...
Read MoreHow to resize a navigation bar on scroll with CSS and JavaScript?
In this article going to discuss how to resize a navigation bar on scroll with the help of CSS and JavaScript. A navigation bar contains the list of elements present in your website; including the links to navigate through the website. It usually the first pit-stop for the users visiting the website who seek guidance to walk through the website. Resizing is the same as hiding and showing the navigation. Here, we just need to increase the padding, and size of the navigation bar with the help of JavaScript. In this example we are creating a webpage displaying “navigation bar”. ...
Read MoreHow to create a responsive bottom navigation menu with CSS and JavaScript?
In this article we are going to discuss how to create a responsive bottom navigation menu with CSS and JavaScript. Usually once you create a web page, when you alter the size of the page, some of the contents of the page will be hidden. A responsive page is the one which adjusts the contents of the page as we change the dimensions of the page. To create a responsive navigation menu, we have to use CSS and JavaScript. The responsive menu resizes the browser menu to see how the navigation menu works on small and mobile−size displays. In short ...
Read MoreHow to create an off-canvas menu with CSS and JavaScript?
In this, article we are going to create off canvas menu using CSS and JavaScript. Off−canvas menu lets you display your content as a sidebar when a button is activated. This helps you to display a certain aspect of your site in the side navigation panel thus giving a user−friendly familiarity to your guests. An off−canvas menu can also be accessed by sliding left−to−right or right−to−left (if you are using a touchscreen device) depending on the design of your website. This is usually used in cases where a website has a lot of links that don’t fit in the top ...
Read MoreHow to create a full screen overlay navigation menu with CSS and JavaScript?
In this article, we are going to discuss how to create a full−screen overlay navigation menu with CSS and JavaScript. Overlay in Web applications is nothing but transposing one HTML element over other. We can overlay images, pages, text, etc. There are three ways to create a full−screen overlay navigation bar which are listed below. From the left side, From the top side, and No animation. There is no Direct way to create an overlay; you can overlay two HTML elements using the technologies specified above. Steps to create a full-screen overlay navigation menu Following are the steps ...
Read MoreHow to change tabs on hover with CSS and JavaScript?
In this article, we will discuss how to change tabs on hover with CSS and JavaScript. Hover Tabs are the easiest way to access the content of other tabs without leaving the current tab. When you hover over a tab that is not currently open, the content inside it will be displayed in a small window. Let us suppose you are accessing the Google Chrome browser with two tabs: one tab with a blog and the other tab containing a social media network. When you hover over the tab with social media network tab while accessing the blog tab, the ...
Read MoreHow to create tabs with CSS and JavaScript?
In this article, we are going to discuss how to create tabs with CSS and JavaScript. Tabs are containers whose main purpose is to show and navigate through the diverse content of the website. Tabs are commonly used to manage the space and make the website more user-friendly without reloading too many times. The content in these tabs are usually closely related but mutually exclusive. There are several types of tabs which can be created and used in various cases − Horizontal tabs Horizontal with Secondary Tabs Frameless Horizontal Tabs Vertical Tabs Vertical Tabs with Second Tabs ...
Read MoreObject literals vs constructors in JavaScript
Object literals and constructors both are used to create an Object in JavaScript. An object created by the object literals is a singleton. This means when a change is made to the object, it affects that object across the entire script. If an object created by a function constructor has multiple instances of the object. This means the changes made to one instance, will not affect other instances. Object Literal Notation − Let’s create user details where we have the key, name, age, and name of the company. So we are creating an object named userDetails. const userDetails = {name: "Aman", ...
Read More