nav level template works. Dropdown headers not working yet.
This commit is contained in:
Mark Eaton
+231
-202
@@ -1,3 +1,26 @@
|
|||||||
|
const navComponent = {
|
||||||
|
template:
|
||||||
|
`<ul class="nav navbar-nav" id="navbar-center">
|
||||||
|
<li class="dropdown main-nav-dropdown">
|
||||||
|
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<div class="caret-text">{{ navmenu }}</div>
|
||||||
|
<div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu fade dropdown-margin">
|
||||||
|
<li>
|
||||||
|
<a v-for="item in navmenu" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
|
||||||
|
<div class="bigger-fancy-text">
|
||||||
|
<i v-bind:class="item.icon" aria-hidden="true"></i>
|
||||||
|
<strong>{{ item.description }}</strong>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>`,
|
||||||
|
props: ['navmenu']
|
||||||
|
}
|
||||||
|
|
||||||
const menusComponent = {
|
const menusComponent = {
|
||||||
template:
|
template:
|
||||||
`<div class="bigger-fancy-text">
|
`<div class="bigger-fancy-text">
|
||||||
@@ -7,212 +30,218 @@ const menusComponent = {
|
|||||||
props: ['item']
|
props: ['item']
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
components: {
|
components: {
|
||||||
|
'nav-component': navComponent,
|
||||||
'menus-component': menusComponent
|
'menus-component': menusComponent
|
||||||
},
|
},
|
||||||
data: {
|
data() {
|
||||||
hamburger: [
|
return {
|
||||||
{
|
hamburger: [
|
||||||
link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
|
{
|
||||||
icon: "fas fa-search fa-fw bigger-icon",
|
link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
|
||||||
description: "OneSearch",
|
icon: "fas fa-search fa-fw bigger-icon",
|
||||||
target_blank: "",
|
description: "OneSearch",
|
||||||
id: 1
|
target_blank: "",
|
||||||
},
|
id: 1
|
||||||
{
|
},
|
||||||
link: "https://library.kbcc.cuny.edu/az.php",
|
{
|
||||||
icon: "fas fa-database fa-fw bigger-icon",
|
link: "https://library.kbcc.cuny.edu/az.php",
|
||||||
description: "Databases A to Z",
|
icon: "fas fa-database fa-fw bigger-icon",
|
||||||
target_blank: "",
|
description: "Databases A to Z",
|
||||||
id: 2
|
target_blank: "",
|
||||||
},
|
id: 2
|
||||||
{
|
},
|
||||||
link: "https://library.kbcc.cuny.edu/guides",
|
{
|
||||||
icon: "fas fa-telescope fa-fw bigger-icon",
|
link: "https://library.kbcc.cuny.edu/guides",
|
||||||
description: "Research Guides",
|
icon: "fas fa-telescope fa-fw bigger-icon",
|
||||||
target_blank: "",
|
description: "Research Guides",
|
||||||
id: 3
|
target_blank: "",
|
||||||
},
|
id: 3
|
||||||
{
|
},
|
||||||
link: "https://library.kbcc.cuny.edu/faq",
|
{
|
||||||
icon: "fas fa-question-circle fa-fw bigger-icon",
|
link: "https://library.kbcc.cuny.edu/faq",
|
||||||
description: "FAQ",
|
icon: "fas fa-question-circle fa-fw bigger-icon",
|
||||||
target_blank: "",
|
description: "FAQ",
|
||||||
id: 4
|
target_blank: "",
|
||||||
},
|
id: 4
|
||||||
{
|
},
|
||||||
link: "https://library.kbcc.cuny.edu/calendar",
|
{
|
||||||
icon: "fas fa-clock fa-fw bigger-icon",
|
link: "https://library.kbcc.cuny.edu/calendar",
|
||||||
description: "Library Hours",
|
icon: "fas fa-clock fa-fw bigger-icon",
|
||||||
target_blank: "",
|
description: "Library Hours",
|
||||||
id: 5
|
target_blank: "",
|
||||||
},
|
id: 5
|
||||||
{
|
},
|
||||||
link: "https://library.kbcc.cuny.edu/sitemap",
|
{
|
||||||
icon: "fas fa-location-arrow fa-fw bigger-icon",
|
link: "https://library.kbcc.cuny.edu/sitemap",
|
||||||
description: "Site Map",
|
icon: "fas fa-location-arrow fa-fw bigger-icon",
|
||||||
target_blank: "",
|
description: "Site Map",
|
||||||
id: 6
|
target_blank: "",
|
||||||
}
|
id: 6
|
||||||
],
|
}
|
||||||
findIt: [
|
],
|
||||||
{
|
navListOfMenus: {
|
||||||
link: "https://library.kbcc.cuny.edu/az.php",
|
findIt: [
|
||||||
icon: "fas fa-database fa-fw bigger-icon",
|
{
|
||||||
description: "Databases A to Z",
|
link: "https://library.kbcc.cuny.edu/az.php",
|
||||||
target_blank: "",
|
icon: "fas fa-database fa-fw bigger-icon",
|
||||||
id: 1
|
description: "Databases A to Z",
|
||||||
},
|
target_blank: "",
|
||||||
{
|
id: 1
|
||||||
link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all",
|
},
|
||||||
icon: "fas fa-newspaper fa-fw bigger-icon",
|
{
|
||||||
description: "Newspaper Search",
|
link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all",
|
||||||
target_blank: "",
|
icon: "fas fa-newspaper fa-fw bigger-icon",
|
||||||
id: 2
|
description: "Newspaper Search",
|
||||||
},
|
target_blank: "",
|
||||||
{
|
id: 2
|
||||||
link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves",
|
},
|
||||||
icon: "fas fa-cloud-download-alt fa-fw bigger-icon",
|
{
|
||||||
description: "Course Reserves",
|
link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves",
|
||||||
target_blank: "",
|
icon: "fas fa-cloud-download-alt fa-fw bigger-icon",
|
||||||
id: 3
|
description: "Course Reserves",
|
||||||
},
|
target_blank: "",
|
||||||
{
|
id: 3
|
||||||
link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB",
|
},
|
||||||
icon: "fas fa-book fa-fw bigger-icon",
|
{
|
||||||
description: "Search for Specific Journals",
|
link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB",
|
||||||
target_blank: "",
|
icon: "fas fa-book fa-fw bigger-icon",
|
||||||
id: 4
|
description: "Search for Specific Journals",
|
||||||
},
|
target_blank: "",
|
||||||
{
|
id: 4
|
||||||
link: "https://library.kbcc.cuny.edu/academicworks",
|
},
|
||||||
icon: "fas fa-archive fa-fw bigger-icon",
|
{
|
||||||
description: "CUNY Academic Works",
|
link: "https://library.kbcc.cuny.edu/academicworks",
|
||||||
target_blank: "_blank",
|
icon: "fas fa-archive fa-fw bigger-icon",
|
||||||
id: 5
|
description: "CUNY Academic Works",
|
||||||
},
|
target_blank: "_blank",
|
||||||
{
|
id: 5
|
||||||
link: "https://www.bkstr.com/kingsboroughccstore/home",
|
},
|
||||||
icon: "fas fa-cash-register fa-fw bigger-icon",
|
{
|
||||||
description: "KBCC Bookstore",
|
link: "https://www.bkstr.com/kingsboroughccstore/home",
|
||||||
target_blank: "_blank",
|
icon: "fas fa-cash-register fa-fw bigger-icon",
|
||||||
id: 6
|
description: "KBCC Bookstore",
|
||||||
}
|
target_blank: "_blank",
|
||||||
],
|
id: 6
|
||||||
services: [
|
}
|
||||||
{
|
],
|
||||||
link: "http://kbcc.cuny.illiad.oclc.org/illiad/logon.html",
|
services: [
|
||||||
icon: "fas fa-books fa-fw bigger-icon",
|
{
|
||||||
description: "Interlibrary Loan",
|
link: "http://kbcc.cuny.illiad.oclc.org/illiad/logon.html",
|
||||||
target_blank: "_blank",
|
icon: "fas fa-books fa-fw bigger-icon",
|
||||||
id: 1
|
description: "Interlibrary Loan",
|
||||||
},
|
target_blank: "_blank",
|
||||||
{
|
id: 1
|
||||||
link: "https://library.kbcc.cuny.edu/libraryservices/informationliteracy",
|
},
|
||||||
icon: "fas fa-chalkboard-teacher fa-fw bigger-icon",
|
{
|
||||||
description: "Book a Library Instruction Session" ,
|
link: "https://library.kbcc.cuny.edu/libraryservices/informationliteracy",
|
||||||
target_blank: "",
|
icon: "fas fa-chalkboard-teacher fa-fw bigger-icon",
|
||||||
id: 2
|
description: "Book a Library Instruction Session" ,
|
||||||
},
|
target_blank: "",
|
||||||
{
|
id: 2
|
||||||
link: "https://library.kbcc.cuny.edu/mediaservices",
|
},
|
||||||
icon: "fas fa-photo-video fa-fw bigger-icon",
|
{
|
||||||
description: "Media Services",
|
link: "https://library.kbcc.cuny.edu/mediaservices",
|
||||||
target_blank: "",
|
icon: "fas fa-photo-video fa-fw bigger-icon",
|
||||||
id: 3
|
description: "Media Services",
|
||||||
},
|
target_blank: "",
|
||||||
{
|
id: 3
|
||||||
link: "https://kbcc-cuny.libwizard.com/f/bookrequest",
|
},
|
||||||
icon: "fas fa-shopping-basket fa-fw bigger-icon",
|
{
|
||||||
description: "Suggest a Book for Purchase",
|
link: "https://kbcc-cuny.libwizard.com/f/bookrequest",
|
||||||
target_blank: "",
|
icon: "fas fa-shopping-basket fa-fw bigger-icon",
|
||||||
id: 4
|
description: "Suggest a Book for Purchase",
|
||||||
},
|
target_blank: "",
|
||||||
{
|
id: 4
|
||||||
link: "https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406",
|
},
|
||||||
icon: "fas fa-bookmark fa-fw bigger-icon",
|
{
|
||||||
description: "Suggest an Item to Add to Reserves",
|
link: "https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406",
|
||||||
target_blank: "",
|
icon: "fas fa-bookmark fa-fw bigger-icon",
|
||||||
id: 5
|
description: "Suggest an Item to Add to Reserves",
|
||||||
}
|
target_blank: "",
|
||||||
],
|
id: 5
|
||||||
aboutUs: [
|
}
|
||||||
{
|
],
|
||||||
link: "https://library.kbcc.cuny.edu/about-us/directory",
|
aboutUs: [
|
||||||
icon: "fas fa-address-book fa-fw bigger-icon",
|
{
|
||||||
description: "Faculty & Staff Directory",
|
link: "https://library.kbcc.cuny.edu/about-us/directory",
|
||||||
target_blank: "",
|
icon: "fas fa-address-book fa-fw bigger-icon",
|
||||||
id: 1
|
description: "Faculty & Staff Directory",
|
||||||
},
|
target_blank: "",
|
||||||
{
|
id: 1
|
||||||
link: "https://library.kbcc.cuny.edu/newarrivals",
|
},
|
||||||
icon: "far fa-mail-bulk fa-fw bigger-icon",
|
{
|
||||||
description: "New Arrivals",
|
link: "https://library.kbcc.cuny.edu/newarrivals",
|
||||||
target_blank: "",
|
icon: "far fa-mail-bulk fa-fw bigger-icon",
|
||||||
id: 2
|
description: "New Arrivals",
|
||||||
},
|
target_blank: "",
|
||||||
{
|
id: 2
|
||||||
link: "https://library.kbcc.cuny.edu/about-us/liaisons",
|
},
|
||||||
icon: "fas fa-theater-masks fa-fw bigger-icon",
|
{
|
||||||
description: "Subject Liaisons",
|
link: "https://library.kbcc.cuny.edu/about-us/liaisons",
|
||||||
target_blank: "",
|
icon: "fas fa-theater-masks fa-fw bigger-icon",
|
||||||
id: 3
|
description: "Subject Liaisons",
|
||||||
},
|
target_blank: "",
|
||||||
{
|
id: 3
|
||||||
link: "https://library.kbcc.cuny.edu/social",
|
},
|
||||||
icon: "far fa-hashtag fa-fw bigger-icon",
|
{
|
||||||
description: "Social Media",
|
link: "https://library.kbcc.cuny.edu/social",
|
||||||
target_blank: "",
|
icon: "far fa-hashtag fa-fw bigger-icon",
|
||||||
id: 4
|
description: "Social Media",
|
||||||
}
|
target_blank: "",
|
||||||
],
|
id: 4
|
||||||
locationAndHours: [
|
}
|
||||||
{
|
],
|
||||||
link: "https://tour.kingsborough.edu/",
|
locationAndHours: [
|
||||||
icon: "fas fa-map-marked-alt fa-fw bigger-icon",
|
{
|
||||||
description: "Campus Map",
|
link: "https://tour.kingsborough.edu/",
|
||||||
target_blank: "",
|
icon: "fas fa-map-marked-alt fa-fw bigger-icon",
|
||||||
id: 1
|
description: "Campus Map",
|
||||||
},
|
target_blank: "",
|
||||||
{
|
id: 1
|
||||||
link: "https://library.kbcc.cuny.edu/calendar",
|
},
|
||||||
icon: "fas fa-clock fa-fw bigger-icon",
|
{
|
||||||
description: "Library Hours",
|
link: "https://library.kbcc.cuny.edu/calendar",
|
||||||
target_blank: "",
|
icon: "fas fa-clock fa-fw bigger-icon",
|
||||||
id: 2
|
description: "Library Hours",
|
||||||
}
|
target_blank: "",
|
||||||
],
|
id: 2
|
||||||
help: [
|
}
|
||||||
{
|
],
|
||||||
link: "https://library.kbcc.cuny.edu/askalibrarian",
|
help: [
|
||||||
icon: "fas fa-book-reader fa-fw bigger-icon",
|
{
|
||||||
description: "Ask A Librarian",
|
link: "https://library.kbcc.cuny.edu/askalibrarian",
|
||||||
target_blank: "",
|
icon: "fas fa-book-reader fa-fw bigger-icon",
|
||||||
id: 1
|
description: "Ask A Librarian",
|
||||||
},
|
target_blank: "",
|
||||||
{
|
id: 1
|
||||||
link: "https://library.kbcc.cuny.edu/faq",
|
},
|
||||||
icon: "fas fa-question-circle fa-fw bigger-icon",
|
{
|
||||||
description: "FAQ",
|
link: "https://library.kbcc.cuny.edu/faq",
|
||||||
target_blank: "",
|
icon: "fas fa-question-circle fa-fw bigger-icon",
|
||||||
id: 2
|
description: "FAQ",
|
||||||
},
|
target_blank: "",
|
||||||
{
|
id: 2
|
||||||
link: "https://library.kbcc.cuny.edu/guides",
|
},
|
||||||
icon: "fas fa-telescope fa-fw bigger-icon",
|
{
|
||||||
description: "Research Guides and Tutorials",
|
link: "https://library.kbcc.cuny.edu/guides",
|
||||||
target_blank: "",
|
icon: "fas fa-telescope fa-fw bigger-icon",
|
||||||
id: 3
|
description: "Research Guides and Tutorials",
|
||||||
},
|
target_blank: "",
|
||||||
{
|
id: 3
|
||||||
link: "https://library.kbcc.cuny.edu/ENGLISH24",
|
},
|
||||||
icon: "fas fa-question fa-fw bigger-icon",
|
{
|
||||||
description: "How to Use the Library",
|
link: "https://library.kbcc.cuny.edu/ENGLISH24",
|
||||||
target_blank: "",
|
icon: "fas fa-question fa-fw bigger-icon",
|
||||||
id: 4
|
description: "How to Use the Library",
|
||||||
}
|
target_blank: "",
|
||||||
]
|
id: 4
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -48,70 +48,8 @@
|
|||||||
<div class="row" id="hamburger-alternative">
|
<div class="row" id="hamburger-alternative">
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<nav class="navbar navbar-default main-nav-container">
|
<nav class="navbar navbar-default main-nav-container">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid" v-for="navmenu in navListOfMenus">
|
||||||
<ul class="nav navbar-nav" id="navbar-center">
|
<nav-component v-bind:navmenu="navmenu"></nav-component>
|
||||||
<li class="dropdown main-nav-dropdown">
|
|
||||||
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<div class="caret-text">Find It</div>
|
|
||||||
<div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu fade dropdown-margin">
|
|
||||||
<li>
|
|
||||||
<a v-for="item in findIt" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
|
|
||||||
<menus-component v-bind:item="item"></menus-component>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown main-nav-dropdown">
|
|
||||||
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<div class="caret-text">Services </div>
|
|
||||||
<div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div></a>
|
|
||||||
<ul class="dropdown-menu fade dropdown-margin">
|
|
||||||
<li>
|
|
||||||
<a v-for="item in services" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
|
|
||||||
<menus-component v-bind:item="item"></menus-component>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown main-nav-dropdown">
|
|
||||||
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<div class="caret-text">About Us </div>
|
|
||||||
<div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div></a>
|
|
||||||
<ul class="dropdown-menu fade dropdown-margin">
|
|
||||||
<li>
|
|
||||||
<a v-for="item in aboutUs" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
|
|
||||||
<menus-component v-bind:item="item"></menus-component>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown main-nav-dropdown">
|
|
||||||
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<div class="caret-text">Location & Hours </div>
|
|
||||||
<div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div></a>
|
|
||||||
<ul class="dropdown-menu fade dropdown-margin">
|
|
||||||
<li>
|
|
||||||
<a v-for="item in locationAndHours" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
|
|
||||||
<menus-component v-bind:item="item"></menus-component>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown main-nav-dropdown">
|
|
||||||
<a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<div class="caret-text">Help </div>
|
|
||||||
<div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div></a>
|
|
||||||
<ul class="dropdown-menu fade dropdown-margin">
|
|
||||||
<li>
|
|
||||||
<a v-for="item in help" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
|
|
||||||
<menus-component v-bind:item="item"></menus-component>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul><!-- end of navbar-center -->
|
|
||||||
</div><!-- end of container-fluid -->
|
</div><!-- end of container-fluid -->
|
||||||
</nav><!-- end of main-nav-container -->
|
</nav><!-- end of main-nav-container -->
|
||||||
</div><!-- end of col-xs-12 -->
|
</div><!-- end of col-xs-12 -->
|
||||||
|
|||||||
Reference in New Issue
Block a user