1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > Superfish by Joeldbirch</ title >
7+ < meta name ="description " content ="Superfish is a jQuery plugin that adds usability enhancements to existing multi-level drop-down menus. ">
8+ < meta name ="author " content ="joeldbirch ">
9+ < meta name ="robots " content ="index, follow ">
10+ <!-- Canonical URL -->
11+ < link rel ="canonical " href ="https://codehimblog.github.io/jquery-plugins/superfish-by-joeldbirch.html ">
12+ <!-- Favicon -->
13+ < link rel ="icon " href ="/favicon.ico " type ="image/png ">
14+ <!-- Bootstrap CSS -->
15+ < link href ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css "
rel ="
stylesheet "
> 16+ <!-- Bootstrap Icons -->
17+ < link href ="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css " rel ="stylesheet ">
18+ < link rel ="stylesheet " href ="/css/styles.css ">
19+ </ head >
20+ < body >
21+ <!-- Navbar -->
22+ < nav class ="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ">
23+ < div class ="container ">
24+ < a class ="navbar-brand " href ="https://codehimblog.github.io ">
25+ < i class ="bi bi-box-seam me-2 "> </ i > CodehimBlog
26+ </ a >
27+ < button class ="navbar-toggler " type ="button " data-bs-toggle ="collapse " data-bs-target ="#navbarNav " aria-controls ="navbarNav " aria-expanded ="false " aria-label ="Toggle navigation ">
28+ < span class ="navbar-toggler-icon "> </ span >
29+ </ button >
30+ < div class ="collapse navbar-collapse " id ="navbarNav ">
31+ < ul class ="navbar-nav ms-auto ">
32+ < li class ="nav-item ">
33+ < a class ="nav-link " href ="https://codehimblog.github.io/ "> < i class ="bi bi-house-door me-1 "> </ i > Home</ a >
34+ </ li >
35+ < li class ="nav-item ">
36+ < a class ="nav-link " href ="https://codehimblog.github.io/projects/ "> < i class ="bi bi-box me-1 "> </ i > Projects</ a >
37+ </ li >
38+ < li class ="nav-item ">
39+ < a class ="nav-link " href ="https://codehimblog.github.io/about.html "> < i class ="bi bi-book me-1 "> </ i > About</ a >
40+ </ li >
41+ < li class ="nav-item ">
42+ < a class ="nav-link " href ="https://codehimblog.github.io/contact.html "> < i class ="bi bi-envelope me-1 "> </ i > Contact</ a >
43+ </ li >
44+ </ ul >
45+ </ div >
46+ </ div >
47+ </ nav >
48+
49+ <!-- Breadcrumbs -->
50+ < div class ="container mt-4 breadcrumbs ">
51+ < nav aria-label ="breadcrumb ">
52+ < ol class ="breadcrumb mb-0 ">
53+ < li class ="breadcrumb-item "> < a href ="https://codehimblog.github.io/ "> Home</ a > </ li >
54+ < li class ="breadcrumb-item "> < a href ="https://codehimblog.github.io/jquery-plugins/ "> jQuery Plugins</ a > </ li >
55+ < li class ="breadcrumb-item active " aria-current ="page "> Superfish</ li >
56+ </ ol >
57+ </ nav >
58+ </ div >
59+
60+ <!-- Schema Markup for Breadcrumbs -->
61+ < script type ="application/ld+json ">
62+ {
63+ "@context" : "https://schema.org" ,
64+ "@type" : "BreadcrumbList" ,
65+ "itemListElement" : [
66+ {
67+ "@type" : "ListItem" ,
68+ "position" : 1 ,
69+ "name" : "Home" ,
70+ "item" : "https://codehimblog.github.io/"
71+ } ,
72+ {
73+ "@type" : "ListItem" ,
74+ "position" : 2 ,
75+ "name" : "jQuery Plugins" ,
76+ "item" : "https://codehimblog.github.io/jquery-plugins/"
77+ } ,
78+ {
79+ "@type" : "ListItem" ,
80+ "position" : 3 ,
81+ "name" : "Superfish" ,
82+ "item" : "https://codehimblog.github.io/projects/{{packageSlug}}"
83+ }
84+ ]
85+ }
86+ </ script >
87+ <!-- Main Content -->
88+ < div class ="container mt-3 ">
89+ < div class ="row ">
90+ <!-- Main Details -->
91+ < main class ="col-md-8 site-main p-0 ">
92+ < article >
93+ <!-- Project Name & Description -->
94+ < h1 id ="packageName "> Superfish</ h1 >
95+ < p id ="packageDescription " class ="text-muted "> Superfish is a jQuery plugin that adds usability enhancements to existing multi-level drop-down menus.</ p >
96+
97+
98+
99+ <!-- Statistics -->
100+ < div class ="stat-row d-flex justify-content-around align-items-center text-center mb-2 ">
101+ < div class ="stat-box d-flex align-items-center flex-column-mobile ">
102+ < i class ="bi bi-star-fill text-warning mb-2 "> </ i >
103+ < div >
104+ < span id ="stargazersCount " class ="stat-value "> 912</ span >
105+ < p class ="stat-label mb-0 "> Stars</ p >
106+ </ div >
107+ </ div >
108+
109+ < div class ="stat-box d-flex align-items-center flex-column-mobile ">
110+ < i class ="bi bi-box-arrow-in-down mb-2 "> </ i >
111+ < div >
112+ < span id ="repoSize " class ="stat-value "> 0.39 MB</ span >
113+ < p class ="stat-label mb-0 "> Size</ p >
114+ </ div >
115+ </ div >
116+
117+ < div class ="stat-box d-flex align-items-center flex-column-mobile ">
118+ < i class ="bi bi-arrow-repeat text-secondary mb-2 "> </ i >
119+ < div >
120+ < span id ="forksCount " class ="stat-value "> 314</ span >
121+ < p class ="stat-label mb-0 "> Forks</ p >
122+ </ div >
123+ </ div >
124+
125+ < div class ="stat-box d-flex align-items-center flex-column-mobile ">
126+ < i class ="bi bi-exclamation-circle text-danger mb-2 "> </ i >
127+ < div >
128+ < span id ="openIssuesCount " class ="stat-value "> 31</ span >
129+ < p class ="stat-label mb-0 "> Open Issues</ p >
130+ </ div >
131+ </ div >
132+ </ div >
133+
134+
135+ < div class ="ad-unit ad-apt ">
136+ < script async src ="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7089100907045419 "
137+ crossorigin ="anonymous "> </ script >
138+ <!-- CodehimBlog APT -->
139+ < ins class ="adsbygoogle "
140+ style ="display:block "
141+ data-ad-client ="ca-pub-7089100907045419 "
142+ data-ad-slot ="4990741913 "
143+ data-ad-format ="auto "
144+ data-full-width-responsive ="true "> </ ins >
145+ < script >
146+ ( adsbygoogle = window . adsbygoogle || [ ] ) . push ( { } ) ;
147+ </ script >
148+ </ div >
149+
150+ < div class ="row mb-4 ">
151+ <!-- Tabs (Left) -->
152+ < div class ="col-12 col-md-6 d-flex justify-content-start mb-3 mb-md-0 ">
153+ < ul class ="nav nav-tabs " id ="infoTabs " role ="tablist ">
154+ < li class ="nav-item " role ="presentation ">
155+ < button class ="nav-link active " id ="installation-tab " data-bs-toggle ="tab " data-bs-target ="#installation " type ="button " role ="tab " aria-controls ="installation " aria-selected ="true ">
156+ < i class ="bi bi-file-earmark-text "> </ i > Readme
157+ </ button >
158+ </ li >
159+ < li class ="nav-item " role ="presentation ">
160+ < button class ="nav-link " id ="changelog-tab " data-bs-toggle ="tab " data-bs-target ="#changelog " type ="button " role ="tab " aria-controls ="changelog " aria-selected ="false ">
161+ < i class ="bi bi-journal-text me-2 "> </ i > Changelog
162+ </ button >
163+ </ li >
164+ </ ul >
165+ </ div >
166+
167+ <!-- Action Buttons (Right) -->
168+ < div class ="col-12 col-md-6 d-flex align-items-center justify-content-end ">
169+ < a href ="https://github.com/joeldbirch/superfish/archive/refs/heads/master.zip " class ="btn btn-primary me-2 action-btn " id ="downloadBtn ">
170+ < i class ="bi bi-cloud-download me-2 "> </ i > Download ZIP
171+ </ a >
172+ < a href ="https://github.com/joeldbirch/superfish " target ="_blank " class ="btn btn-outline-secondary action-btn " id ="githubBtn ">
173+ < i class ="bi bi-github me-2 "> </ i > Fork on GitHub
174+ </ a >
175+ </ div >
176+ </ div >
177+ < div class ="tab-content mt-3 " id ="infoTabsContent ">
178+ < div class ="tab-pane fade show active " id ="installation " role ="tabpanel " aria-labelledby ="installation-tab ">
179+ < h1 > jQuery Superfish Dropdown Menu Plugin</ h1 >
180+ < p > Our favourite aquatic superhero returns from his sojourn across the galaxy infused with astonishing, hitherto unseen new powers. In his modern incarnation (wearing a rather spiffy cape) Superfish is dedicated to keeping dropdown/flyout menus accessible across browsers great and small, in addition to adding support for newer touch devices (running Android, iOS, Windows, etc). All this < strong > and</ strong > a pretty face.</ p >
181+ < h2 > Documentation and Demos</ h2 >
182+ < p > Please use the < a href ="https://superfish.joelbirch.design/ "> existing Superfish documentation</ a > where you will find full explanations of the customisable features and plenty of examples to get you started.</ p >
183+ < h2 > Download < a href ="https://github.com/joeldbirch/superfish/archive/master.zip "> Superfish zip archive</ a > </ h2 >
184+ < h2 > Need help?</ h2 >
185+ < p > Superfish menus have been in use since the dawn of time (well, around 8 years or so) and many are the places where you can find help with your Superfish implementations. < a href ="https://superfish.joelbirch.design/download/#support "> Check out the support options</ a > .</ p >
186+ </ div >
187+
188+ < div class ="tab-pane fade " id ="changelog " role ="tabpanel " aria-labelledby ="changelog-tab ">
189+ < ul id ="changelogList ">
190+ No changelog available.
191+ </ ul >
192+ </ div >
193+
194+ </ div >
195+
196+ < div class ="tags mb-2 mt-2 ">
197+ < a href ="https://codehimblog.github.io/tag/menu " class ="text-decoration-none ">
198+ < div class ="d-inline-flex align-items-center bg-light border rounded-pill px-3 py-1 me-2 mb-2 ">
199+ < i class ="bi bi-tag-fill me-2 "> </ i >
200+ < span > menu</ span >
201+ </ div >
202+ </ a > < a href ="https://codehimblog.github.io/tag/dropdown " class ="text-decoration-none ">
203+ < div class ="d-inline-flex align-items-center bg-light border rounded-pill px-3 py-1 me-2 mb-2 ">
204+ < i class ="bi bi-tag-fill me-2 "> </ i >
205+ < span > dropdown</ span >
206+ </ div >
207+ </ a > < a href ="https://codehimblog.github.io/tag/responsive " class ="text-decoration-none ">
208+ < div class ="d-inline-flex align-items-center bg-light border rounded-pill px-3 py-1 me-2 mb-2 ">
209+ < i class ="bi bi-tag-fill me-2 "> </ i >
210+ < span > responsive</ span >
211+ </ div >
212+ </ a > < a href ="https://codehimblog.github.io/tag/navigation " class ="text-decoration-none ">
213+ < div class ="d-inline-flex align-items-center bg-light border rounded-pill px-3 py-1 me-2 mb-2 ">
214+ < i class ="bi bi-tag-fill me-2 "> </ i >
215+ < span > navigation</ span >
216+ </ div >
217+ </ a > < a href ="https://codehimblog.github.io/tag/jquery-plugin " class ="text-decoration-none ">
218+ < div class ="d-inline-flex align-items-center bg-light border rounded-pill px-3 py-1 me-2 mb-2 ">
219+ < i class ="bi bi-tag-fill me-2 "> </ i >
220+ < span > jquery-plugin</ span >
221+ </ div >
222+ </ a > < a href ="https://codehimblog.github.io/tag/ecosystem%3Ajquery " class ="text-decoration-none ">
223+ < div class ="d-inline-flex align-items-center bg-light border rounded-pill px-3 py-1 me-2 mb-2 ">
224+ < i class ="bi bi-tag-fill me-2 "> </ i >
225+ < span > ecosystem:jquery</ span >
226+ </ div >
227+ </ a >
228+ </ div >
229+
230+ </ article >
231+
232+
233+ </ main >
234+ <!-- Sidebar -->
235+ < aside class ="col-md-4 p-0 ">
236+ < div class ="sidebar ">
237+ <!-- Owner Section -->
238+ < div class ="sidebar-item mb-4 ">
239+ < div class ="ad-unit ">
240+ < script async src ="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7089100907045419 "
241+ crossorigin ="anonymous "> </ script >
242+ <!-- CodehimBlog Sidebar -->
243+ < ins class ="adsbygoogle "
244+ style ="display:block "
245+ data-ad-client ="ca-pub-7089100907045419 "
246+ data-ad-slot ="8929986923 "
247+ data-ad-format ="auto "
248+ data-full-width-responsive ="true "> </ ins >
249+ < script >
250+ ( adsbygoogle = window . adsbygoogle || [ ] ) . push ( { } ) ;
251+ </ script >
252+ </ div >
253+ < div class ="d-flex align-items-center ">
254+ < img src ="https://avatars.githubusercontent.com/u/75602?v=4 " alt ="Owner Avatar " class ="rounded-circle me-2 owner-avatar ">
255+ < a href ="https://github.com/joeldbirch " target ="_blank " id ="ownerName " class ="sidebar-link "> joeldbirch</ a >
256+ </ div >
257+ </ div >
258+
259+ <!-- Metadata Section -->
260+ < div class ="sidebar-item mb-2 ">
261+ < div class ="metadata-item d-flex align-items-center ">
262+ < i class ="bi bi-calendar me-2 "> </ i >
263+ < strong > Created At:</ strong >
264+ < span id ="createdAt " class ="ms-1 "> January 29, 2013</ span >
265+ </ div >
266+ < div class ="metadata-item d-flex align-items-center mt-2 ">
267+ < i class ="bi bi-pencil-square me-2 "> </ i >
268+ < strong > Last Updated:</ strong >
269+ < span id ="updatedAt " class ="ms-1 "> November 8, 2024</ span >
270+ </ div >
271+ < div class ="metadata-item d-flex align-items-center mt-2 ">
272+ < i class ="bi bi-file-earmark-code me-2 "> </ i >
273+ < strong > Language:</ strong >
274+ < span id ="language " class ="ms-1 "> JavaScript</ span >
275+ </ div >
276+
277+ < div class ="metadata-item d-flex align-items-center mt-2 ">
278+ < i class ="bi bi-shield-check "> </ i >
279+ < strong > License:</ strong >
280+ < span id ="license " class ="ms-1 "> Other</ span >
281+ </ div >
282+ < a href ="# " target ="_blank " class ="btn btn-outline-dark btn-sm " id ="homepageBtn ">
283+ < i class ="bi bi-house-door me-2 "> </ i > Visit Homepage
284+ </ a >
285+
286+ </ div >
287+
288+ < div class ="sidebar-item mb-2 ">
289+ < h5 class ="sidebar-title "> Dependencies</ h5 > < ul class ="dependencies-list "> < li > jquery (>=1.8)</ li > </ ul > < h5 class ="sidebar-title "> Development Dependencies</ h5 > < ul class ="dependencies-list "> < li > grunt (^0.4.5)</ li > < li > grunt-contrib-clean (^1.0.0)</ li > < li > grunt-contrib-coffee (^1.0.0)</ li > < li > grunt-contrib-concat (^1.0.0)</ li > < li > grunt-contrib-copy (^0.8.2)</ li > < li > grunt-contrib-jasmine (^1.0.0)</ li > < li > grunt-contrib-jshint (^1.0.0)</ li > < li > grunt-contrib-uglify (^0.11.1)</ li > < li > grunt-contrib-watch (^0.6.1)</ li > </ ul >
290+ </ div >
291+
292+ < div class ="sidebar-item ">
293+ < h5 class ="sidebar-title "> Contributors</ h5 >
294+ < ul class ="p-0 " id ="contributorsList ">
295+ < ul class ="list-group list-group-flush " id ="contributorsList "> < li class ="list-group-item d-flex align-items-center contributor-item "> < img src ="https://avatars.githubusercontent.com/u/75602?v=4 " alt ="joeldbirch " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/joeldbirch " target ="_blank " class ="text-decoration-none fw-bold "> joeldbirch</ a > < p class ="mb-0 text-muted small "> 191 contributions</ p > </ div > </ li > < li class ="list-group-item d-flex align-items-center contributor-item "> < img src ="https://avatars.githubusercontent.com/u/159245?v=4 " alt ="chkal " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/chkal " target ="_blank " class ="text-decoration-none fw-bold "> chkal</ a > < p class ="mb-0 text-muted small "> 2 contributions</ p > </ div > </ li > < li class ="list-group-item d-flex align-items-center contributor-item "> < img src ="https://avatars.githubusercontent.com/u/379519?v=4 " alt ="simshaun " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/simshaun " target ="_blank " class ="text-decoration-none fw-bold "> simshaun</ a > < p class ="mb-0 text-muted small "> 2 contributions</ p > </ div > </ li > < li class ="list-group-item d-flex align-items-center contributor-item "> < img src ="https://avatars.githubusercontent.com/u/4804515?v=4 " alt ="andrezrv " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/andrezrv " target ="_blank " class ="text-decoration-none fw-bold "> andrezrv</ a > < p class ="mb-0 text-muted small "> 1 contributions</ p > </ div > </ li > < li class ="list-group-item d-flex align-items-center contributor-item "> < img src ="https://avatars.githubusercontent.com/u/464029?v=4 " alt ="kozi " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/kozi " target ="_blank " class ="text-decoration-none fw-bold "> kozi</ a > < p class ="mb-0 text-muted small "> 1 contributions</ p > </ div > </ li > < li class ="list-group-item d-flex align-items-center contributor-item d-none "> < img src ="https://avatars.githubusercontent.com/u/1024833?v=4 " alt ="phette23 " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/phette23 " target ="_blank " class ="text-decoration-none fw-bold "> phette23</ a > < p class ="mb-0 text-muted small "> 1 contributions</ p > </ div > </ li > < li class ="list-group-item text-center "> < a href ="# " id ="toggleContributors " class ="d-block "> +1 more Contributors</ a > </ li > </ ul >
296+ </ ul >
297+
298+ </ div >
299+
300+ < div class ="ad-unit ">
301+ < script async src ="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7089100907045419 "
302+ crossorigin ="anonymous "> </ script >
303+ <!-- CodehimBlog Skyscrapper -->
304+ < ins class ="adsbygoogle "
305+ style ="display:block "
306+ data-ad-client ="ca-pub-7089100907045419 "
307+ data-ad-slot ="7469565592 "
308+ data-ad-format ="auto "
309+ data-full-width-responsive ="true "> </ ins >
310+ < script >
311+ ( adsbygoogle = window . adsbygoogle || [ ] ) . push ( { } ) ;
312+ </ script >
313+ </ div >
314+
315+ </ div >
316+ </ aside >
317+ </ div >
318+ </ div >
319+ <!-- Footer -->
320+ < footer class ="bg-dark text-white text-center py-3 page-footer ">
321+ < div class ="container ">
322+ < p class ="mb-2 "> © 2024 CodehimBlog - Powered by GitHub</ p >
323+ < nav >
324+ < ul class ="list-inline mb-0 ">
325+ < li class ="list-inline-item ">
326+ < a href ="/privacy-policy.html " class ="footer-link "> Privacy Policy</ a >
327+ </ li >
328+ < li class ="list-inline-item ">
329+ < span class ="text-white "> |</ span >
330+ </ li >
331+ < li class ="list-inline-item ">
332+ < a href ="/terms-and-conditions.html " class ="footer-link "> Terms and Conditions</ a >
333+ </ li >
334+ </ ul >
335+ </ nav >
336+ </ div >
337+ </ footer >
338+ <!-- Bootstrap Bundle JS -->
339+ < script src ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js "
> </ script > 340+ < script src ="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js "> </ script >
341+ < script src ="/js/script.js "> </ script >
342+ <!-- Google tag (gtag.js) -->
343+ < script async src ="https://www.googletagmanager.com/gtag/js?id=G-FG2ZX76XGT "> </ script >
344+ < script >
345+ window . dataLayer = window . dataLayer || [ ] ;
346+ function gtag ( ) { dataLayer . push ( arguments ) ; }
347+ gtag ( 'js' , new Date ( ) ) ;
348+
349+ gtag ( 'config' , 'G-FG2ZX76XGT' ) ;
350+ </ script >
351+ </ body >
352+ </ html >
0 commit comments