Breadcrumb made with jQuery

Developer
Laura Moraiti
Size
3,943 Kb
Views
26,312
  1. Breadcrumb made with jQuery Previews
  2. Breadcrumb made with jQuery HTML Codes
  3. Breadcrumb made with jQuery CSS Codes
  4. Breadcrumb made with jQuery JS Codes

How do I make an breadcrumb made with jquery?

This breadcrumb was created to fit a certain funcionality: - Top item of each level works as "home" (i.e: Favorite TV Series, channel). What is a breadcrumb made with jquery? How do you make a breadcrumb made with jquery? This script and codes were developed by Laura Moraiti on 27 August 2022, Saturday.

Breadcrumb made with jQuery Previews
IQ Test

Breadcrumb made with jQuery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Breadcrumb made with jQuery</title> <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="breadcrumb"> <div class="top-item">Favorite TV Series</div> <ul class="sub-level none"> <li> <span>HBO</span> <ul class="none"> <li>True Detective</li> <li>Game of Thrones</li> </ul> </li> <li> <span>AMC</span> <ul class="none"> <li>The Walking Dead</li> <li>Breaking Bad</li> </ul> </li> <li> <span>Others</span> <ul class="none"> <li> <span>Comedy</span> <ul class="none"> <li> <span>Oldie</span> <ul class="none"> <li>Seinfeld</li> </ul> </li> <li>Friends</li> <li>Big Bang Theory</li> </ul> </li> <li>Resurrection</li> <li>Marvel's Agent Carter</li> <li>Sherlock</li> </ul> </li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Breadcrumb made with jQuery - Script Codes CSS Codes

* { box-sizing: border-box; font-family: 'Droid Serif';
}
.top-item, span { cursor: hand; cursor: pointer;
}
.none { display: none;
}
.block { display: block;
}
ul, li { list-style-type: none; margin: 0; padding: 0;
}
div,
li,
ul,
span { float: left; line-height: 2.5em;
}
.top-item { color: #fff; background-color: #111; padding: 0 .8em; font-weight: 700;
}
.top-item:hover { background-color: #555; transition: background-color .3s ease-in;
}
.top-item.open:after { content: '\00D7'; padding-left: .5em; color: coral;
}
span { background-color: coral; color: #fff; padding: 0 .8em; font-weight: 700; font-style: italic;
}
span:hover { background-color: #ff4704; transition: background-color .3s ease-in;
}
span + ul > li { padding: 0 .8em; color: #ffb79d;
}
.active { padding: 0;
}
.active .active { padding: 0;
}
.clicked { color: coral; position: relative;
}
.clicked:after { content: ''; position: absolute; bottom: 0; left: 2.5%; width: 95%; height: 2px; background-color: #000;
}

Breadcrumb made with jQuery - Script Codes JS Codes

$(function() {	(function (){ var bCrumb = { subLevel: $('.sub-level'), hide: 'none', show: 'block', active: 'active', top: $('.top-item'), init: function() { this.top.on('click', this.opener); }, // ---- DRY ---- // Hide-show toggle + extra class hideToShow: function(item, extraClass) { var addClass = (extraClass !== '') ? bCrumb.show + ' ' + extraClass : bCrumb.show; item.removeClass(bCrumb.hide).addClass(addClass); }, // Hides all siblings of "t" byeSiblings: function(t) { var elem = t.siblings(); elem.addClass(bCrumb.hide); }, // ---- SPEC ---- // This handles the top item opener: function() { var top = $(this), li = top.next('ul').find('li'), nextUl = top.removeClass('open').next('ul'); bCrumb.hideToShow(nextUl); // @todo: Not specific enough $('span').on('click', bCrumb.toggler); bCrumb.liHandler(li); }, // Hide unclicked LIs liHandler: function(li) { li.removeClass() .children('ul').removeClass().addClass(bCrumb.hide); }, // Open the list associated with the clicked span and call events toggler: function() { var span = $(this), li = span.parent(), nextUl = span.next('ul'), active = 'active-list'; bCrumb.hideToShow(nextUl, active); bCrumb.hideSiblings(li); bCrumb.activeHideSiblings( $('.' + active) ); bCrumb.top.addClass('open'); }, // Hide all siblings of the li, except the active one hideSiblings: function(li) { var span = li.find('span'), active = bCrumb.active, subList = $('.' + active).find('.active-list').find('.active-list').length; li.addClass(active); if(li.hasClass(active)) { bCrumb.byeSiblings(li); } if(subList !== 0) { $('.' + active) .children('span') .on('click', function(){ $(this) .parent() .find('.active-list') .find('.active-list') .removeClass() .addClass(bCrumb.hide); }); } span.parent().css('padding', '0'); }, // Toggle children when clicking on parent activeHideSiblings: function(list) { list .children().removeClass()	.one('click', function(){	var t = $(this);	if(t.children('span').length == 0) { t.addClass('clicked'); }	bCrumb.byeSiblings(t);	}); } };	bCrumb.init();	})();
});
Breadcrumb made with jQuery - Script Codes
Breadcrumb made with jQuery - Script Codes
Home Page Home
Developer Laura Moraiti
Username Fixie
Uploaded August 27, 2022
Rating 3.5
Size 3,943 Kb
Views 26,312
Do you need developer help for Breadcrumb made with jQuery?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Laura Moraiti (Fixie) Script Codes
Name
Striped background for a container with more than one element
Edit inline text and hidden input with jQuery
Fun responsive split layout
Responsive and friendly table
Two column of responsive height
Horizontal infinite loop newsticker
Dynamic prefix, transition and transform SASS mixins
WIP
Text and headings flow for a health site, on the making
Simple and clean form
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!