Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to use HTML, CSS and JS to create responsive filterable games", the content is simple and easy to understand, organized clearly, I hope to help you solve doubts, let Xiaobian lead you to study and learn "how to use HTML, CSS and JS to create responsive filterable games" this article bar.

Create responsive, filterable game + tool presentation pages using HTML, CSS, and JS.

This website is suitable for simple operations such as these.

For these reasons, I have made a number of decisions:

The website should be as accessible as possible and no page should be larger than 30KB. Each tool should have a button to return to the home page.

Responsive filterable games are used on various websites to sort works by category. In this article, I'll show you how to create responsive filterable game + tool presentation pages with HTML CSS and javascript. Responsive filterable games to see the address: haiyong.site/moyu

Filterable portfolios are a popular web element that can be used on a variety of websites. It is a gallery of works, a large number of works neatly arranged together. It is worth noting that all works can be sorted by category here. There is a navigation bar where all categories are sorted. Click on any of these categories. You can then see all works in that category while hiding the rest. As a result, the user can easily find the image of his choice.

I started by creating a navigation bar on the web page. Five categories of buttons were created here, using a total of 15 images. You can use this to replace the artwork or add more artwork if desired. In the categories in the navigation bar, you can see the works related to the category you clicked on. Similarly, when you click on another category, the works of that category will be seen and the rest will be hidden. I made it fully responsive so that it could be used on all devices.

Online Demo Online Demo Address haiyong.site/moyu

Tip: I believe we should all know how to get the source code, direct F12 or ctrl+u, interested small partners can collect the URL, I will continue to update later, to create a fishing site with 100 games + tools. Current status: 17/100

How to create filterable game + tool display pages using HTML and CSS

I've shown beginners the complete steps of how to make it for beginners with the graphic below. Of course, you can also use the download button at the bottom of the article to download the required source code from Github.

I completed the basic design of the web page using the CSS code below.

body{ line-height: 1.5; font-family: sans-serif;}*{ margin:0; box-sizing: border-box;}.row{ display: flex; flex-wrap: wrap;}img{ max-width: 100%; vertical-align: middle;} Step 1: Create basic structure

I have created the basic structure of this gallery using my own HTML and CSS code. Here I use background-color:#2a 2932 and min-height: 100vh.

HTML

CSS

.gallery{ width: 100%; display: block; min-height: 100vh; background-color: #2a2932; padding: 100px 0;}.container{ max-width: 1170px; margin:auto;}

demonstration effect

Yes, you're right, it's black.

Step 2: Create navigation bars for categories

Now I have created a navigation bar using the HTML and CSS code below. As I said before, there is a navigation bar where all categories are sorted. Here, I used 5 themes and 15 images. If necessary, you can increase or decrease the number of categories.

Text in categories has the shape of buttons. The text in these buttons is font-size: 17px and the color is white. Border: 2px solid white is used to make button-sized text.

HTML

all tool game 3D style games Mobile games

CSS

.gallery .gallery-filter{ padding: 0 15px; width: 100%; text-align: center; margin-bottom: 40px;}.gallery .gallery-filter .filter-item{ color: #ffffff; font-size: 17px; border: 2px solid white; text-transform: uppercase; display: inline-block; border-radius: 20px; margin-right: 8px; cursor: pointer; padding: 8px 20px 8px 20px; line-height: 1.2; transition: all 0.3s ease;}

demonstration effect

I designed the activity button with some CSS code below. This means that the category you click on here will change somewhat. The changes here are determined by the CSS code below. The background color and border color will change to blue.

CSS

.gallery .gallery-filter .filter-item.active{ color: white; border-color : #16b5ef; background: #16b5ef;}

demonstration effect

Step 3: Add pictures to the gallery

Now I have added all the images using the following HTML code. I added 15 items here. The category used is given in the first div ( ). Here I used two div's for each image.

HTML

//...等等一共15个小项目，太长我就不一一列出影响阅读了，需要源码在文首或文末自取第 4 步：设计上面添加的项目

现在我已经使用 CSS 代码精美地排列了这些项目。在这里我在每列中使用了三个项目。使用代码width: calc (100% / 3)将这三个项目放在每一列中。在这里，如果你想在每列中放置四个图像可以使用 4 替换 3。

CSS

.gallery .gallery-item{ width: calc(100% / 3); padding: 15px;}.gallery .gallery-item-inner img{ width: 100%; border: 3px solid #d4dad9;}

演示效果

我通过@keyframes 使用了动画。当你单击一个类别时，这些类别中的每一个都将与图像并排显示。例如，如果您单击具有四个图像的类别。第一行有两个图像，第二行有两个图像。

当您单击此类别时，该类别其余部分中的所有图像将被隐藏，所有四个图像将并排显示。以下代码已用于使此重定位更加生动。此处使用了 0.5 秒，这意味着更改该位置需要 0.5 秒。

CSS

.gallery .gallery-item.hide{ display: none;}第 5 步：使可过滤的图片库具有响应性

现在我已经使用 CSS 代码的媒体查询使它具有响应性。在这里，我们为移动设备和标签添加了单独的信息。

CSS

@media(max-width: 491px){ .gallery .gallery-item{ width: 50%; }}@media(max-width: 667px){ .gallery .gallery-item{ width: 100%; } .gallery .gallery-filter .filter-item{ margin-bottom: 10px; }}

在我手机上的演示效果

第 6 步：现在使用 JavaScript 执行此设计

上面我们刚刚设计了它，现在我们将使用 JavaScript 代码实现它。换句话说，如果我们点击此导航中的类别，我们将执行该类别的图像，以便可以看到它们。

首先设置gallery-filter 和gallery-item 的常量。因为我们知道在 JavaScript 中没有任何 ID 或类函数可以直接使用。

JavaScript

const filterContainer = document.querySelector(".gallery-filter");const galleryItems = document.querySelectorAll(".gallery-item");

我已经使用下面的 JavaScript 代码实现了这些类别按钮。

JavaScript

filterContainer.addEventListener("click", (event) =>{ if(event.target.classList.contains("filter-item")){ // 停用现有的 active 'filter-item' filterContainer.querySelector(".active").classList.remove("active"); // 启用新的 'filter-item' event.target.classList.add("active"); const filterValue = event.target.getAttribute("data-filter"); galleryItems.forEach((item) =>{ if(item.classList.contains(filterValue) || filterValue === 'all'){ item.classList.remove("hide"); item.classList.add("show"); } else{ item.classList.remove("show"); item.classList.add("hide"); } }); } });以上是"如何使用HTML、CSS和JS创建响应式可过滤的游戏"这篇文章的所有内容，感谢各位的阅读!相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.