Image gallery on a web page can be displayed in various forms. One of them is a tabbed image gallery. On clicking the image thumbnail from the image gallery, the image expands. Let us see how to create a tabbed image gallery with HTML and CSS. Set the images for the thumbnail For our example, we have considered 3 images and added to the web page using the element − Image Thumbnail When the mouse cursor is placed on the image, the image thumbnail will appear as clickable because we have set the cursor ... Read More

Following is the code to create modal image gallery with CSS and JavaScript −Example Live Demo

A modal is a dialog box/popup window that is displayed on top of the current page. To create responsive modal images, we use JavaScript to trigger the modal and display the current image inside the when it is clicked on. Also, we are using alt for the image caption text inside the model. Responsive modal images are images that are enlarged to fit into the window based on their size, device resolution, orientation and page layout. These images are usually enlarged with a mouse click. They can also be downloaded on a click from the web browsers. In this example, ... Read More

In this article, we are going to create a responsive slideshow gallery with the help of JavaScript and CSS. A responsive slideshow will display a series of images with a text on them and two arrow buttons using which you can browse through the images. A responsive slideshow gallery or, a responsive image slider gallery is same as the responsive image slide show. It is a series of images whch you can browse through. But instead of arrow marks this provides image thumbnails, showing the preview of the images in the slide show in a small view at the bottom ... Read More

In this article, we are going to create a responsive slideshow with the help of JavaScript and CSS. A responsive slideshow or we can say a responsive image slider, or a responsive images slider with text is a visually attractive and interactive design element that take part your viewers on the website it will have from one or more images with a text overlay on it. That is, it will display a series of images with a text on them. This also provide two arrow buttons suing which you can browse through the images (in both diresctions). This is used ... Read More

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 More

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 More

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 More

ID has to be unique in a document −var option_avail = $('input[name=option_avail]:checked', '#controls').val()     firstoption     secondoption     thirdoption

To create a clickable dropdown menu with CSS and JavaScript, it helps in adding more options, content or links in webpage while saving the space and not overcrowding the webpage. User should have basic knowldge of CSS and javascript to design and add interactivity to the dropdown menu. In this article, we are having a button and three links and our task is to create a clickable dropdown menu with CSS and JavaScript. Steps to Create a Clickable Dropdown Menu We will be following below mentioned steps to create a clickable dropdown menu with CSS and JavaScript: ... Read More