How we can create simple portfolio navigation using HTML CSS JavaScript? Solution: See this JavaScript Portfolio Navigation With CSS UI, Simple Category Filter.
Previously I have shared a similar program named portfolio filter gallery, but this is a little advance if we compare. Basically, This type of portfolio navigation you will see on most of the websites. And business owners create this navigation for managing portfolio items in category bases. If a website has 3 workers and all workers have submitted their work in the portfolio section, then you can filter out by any selected worker using this program.
Today you will learn to create Simple Category Filter for website’s portfolio section. Basically, there are 9 dummy images, a title, 3 categories navigation, and extra navigation to showing all images. At first, you will is all image with blur effect when you will hover on it then it will back to normal. And when you will click on any category, then only those images will clearly visible which are in the category and others will still blurred.
So, Today I am sharing JavaScript Portfolio Navigation With CSS UI. For creating this program I have used pure JavaScript, not any library or framework I have used. And the design or UI is based on CSS so, You can call this a pure HTML CSS JS program. You can use this program on your website as well, and also this will a good practice for you if you are a beginner.
If you are thinking now how this portfolio navigation actually is, then see the preview given below.
Preview Of Simple Portfolio Category Filter
See this video preview to getting an idea of how this category filter looks like.
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
JavaScript Portfolio Navigation With CSS UI Source Code
Before sharing source code, let’s talk about it. First I have created a main div and put a list inside it using HTML <ul> & <li> tags and put another div for placing images. I have placed 9 dummy images using Lorem Picsum, this is dummy image provider service. Every single image I have placed inside a figure tag because putted class names inside the tag.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS, I gave all the important things to design like size, color, font, etc. There I have used a google font for the heading line, and others are normal. For creating responsive design, I gave all the elements a max-width and content’s width in percentage also I have used CSS @media query.
JavaScript managing the main feature of this program. Basically, JS adding and removing the CSS values to functioning this program. JS code is a little complicated, I can’t explain here in writing. You will understand after getting the codes if you have knowledge of JavaScript. For creating this program you have to create 3 files for that. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <head> <meta charset="UTF-8"> <title>Portfolio Navigation | Webdevtrick.com</title> <script src='https://raw.githubusercontent.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js'></script> <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet'> <link href="style.css" rel="stylesheet"> </head> <body> <div class="wrap col-9"> <div class="menu col-9"> <header><h1>Portfolio Navigation</h1></header> <nav> <ul class="navigate"> <li class="showAll" data-type ="all"><a href="#">All</a></li> <li data-type="one"><a href="#">one</a></li> <li data-type="two"><a href="#">two</a></li> <li data-type="three"><a href="#">three</a></li> </ul> </nav> </div> <div class="portfolio col-9"> <figure class="imageSec col-3"> <img src="https://picsum.photos/300/200?random=1" alt="" title="one"></figure> <figure class="imageSec col-3"> <img src="https://picsum.photos/300/200?random=2" alt="" title="one"></figure> <figure class="imageSec col-3"> <img src="https://picsum.photos/300/200?random=3" alt="" title="two"></figure> <figure class="imageSec col-3"> <img src="https://picsum.photos/300/200?random=4" alt="" title="two"></figure> <figure class="imageSec col-3"> <img src="https://picsum.photos/300/200?random=5" alt="" title="three"></figure> <figure class="imageSec col-3"> <img src="https://picsum.photos/300/200?random=6" alt="" title="three"></figure> <figure class="imageSec col-3"> <img src="https://picsum.photos/300/200?random=7" alt="" title="one"></figure> <figure class="imageSec col-3"> <img src="https://picsum.photos/300/200?random=8" alt="" title="three"></figure> <figure class="imageSec col-3"> <img src="https://picsum.photos/300/200?random=9" alt="" title="two"></figure> </div> </div> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ *{ margin: 0; padding: 0; border: 0; } h1 { color: #444; font-size: 44px; font-family: 'Open Sans Condensed', sans-serif;} nav { margin-top: 45px; } nav ul li { display: inline; } nav ul li a { text-decoration: none; padding: .5em 1.5em.5em; color: #444; font-size: 18px; font-family: 'Open Sans Condensed', sans-serif; transition: color .6s, background-color .2s; } nav ul li a:hover { background-color: #ff6600; color: #fff; } .showAll a { border: solid 1px #ff6600; color: #ff6600; } .navigate a { text-transform: uppercase; font-weight: 900; } .col-9 { max-width: 900px; width: 100%; margin: auto; box-sizing: border-box; } .col-3 { max-width: 300px; width: 33.333333%; margin: auto; box-sizing: border-box; } .portfolio { padding-top: 2em; clear: both; } .menu { padding: .3em .3em; } .wrap { padding: .3em; } img { width: 100%; opacity: 1; transition: opacity .6s;} figure{ float: left; position: relative; line-height: 0; padding: .3em; cursor: pointer; } .imageSec:before { content: ''; position: absolute; top: .3em; left: .3em; right: .3em; bottom: .3em; background-color: rgba(255,255,255,.7); opacity: 0.5; transition: opacity 2s, background-color .4s; } .imageSec:hover:before{ background-color: rgba(251,11,63,1); opacity: 0; } @media only screen and (min-width: 600px) { header { float: left } nav { float: right; text-align: right; } } |
function.js
The last step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
// Code By Webdevtrick ( https://webdevtrick.com ) window.onload=function(){ function navigation(showAllClass, ulClass, imgContainerClass, sClass){ this.showAllClass = showAllClass; this.ulClass = ulClass; this.imgContainerClass = imgContainerClass; this.imgSingleClass = sClass; this.imgDefaultClass = this.imgContainerClass.children[0].className; }; navigation.prototype.clearClass = function() { var liLength = this.ulClass.children.length; for(var i=0; i< liLength; i++){ this.ulClass.children[i].removeAttribute("class") } }; navigation.prototype.createClass = function(e){ this.clearClass(); var c= this.showAllClass, li= this.ulClass.children[e] ; li.setAttribute("class",c); }; navigation.prototype.faded = function(i,value){ return i.style.opacity = value || 1; }; navigation.prototype.fadedExt = function(i,value,s){ (s)?i.parentNode.className = this.imgSingleClass : i.parentNode.className = this.imgDefaultClass; this.faded(i,value); }; navigation.prototype.imgShow = function(e){ this.createClass(e); var maxImg = this.imgContainerClass.children.length; for (var l = 0; l < maxImg; l++) { var parent = this.imgContainerClass, image = parent.children[l].firstElementChild, att = image.getAttribute("title"), nav = this.ulClass.children[e].getAttribute("data-type"); this.fadedExt(image,0.3,1); if (nav == att) { this.fadedExt(image,1,1);} else if(nav == "all"){ this.fadedExt(image);} } }; navigation.prototype.sign = function(e){ var parent = this.ulClass, ths = this, child = parent.children[e]; child.firstElementChild.onclick = function(){ return false}; return child.onclick = function(){ths.imgShow(e);} }; navigation.prototype.render = function(){ var liLength = this.ulClass.children.length; for(var k=0; k<liLength; k++){ this.sign(k); } }; var ulPortfolio = document.getElementsByClassName("navigate")[0], imgPortfolio = document.getElementsByClassName("portfolio")[0], aclass = "showAll", imgFigureClass = "col-3", navport = new navigation(aclass,ulPortfolio,imgPortfolio,imgFigureClass); navport.render(); } |
That’s It. Now you have successfully created JavaScript Portfolio Navigation With CSS UI, Simple Category Filter. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
