Checkbox Navigation Example
+Resize window to see responsive behavior
+{title}
-
+
diff --git a/components/cards/CardStandard.jsx b/components/cards/CardStandard.jsx
index 662bd6b..44c9d7d 100644
--- a/components/cards/CardStandard.jsx
+++ b/components/cards/CardStandard.jsx
@@ -18,18 +18,18 @@ const CardStandard = forwardRef(
-
{description}
+
-
+
{eyebrow}
+
{title}
-
+
diff --git a/components/footer/Footer.js b/components/footer/Footer.js
index 21c87c0..e40e721 100644
--- a/components/footer/Footer.js
+++ b/components/footer/Footer.js
@@ -50,7 +50,7 @@ const Footer = forwardRef(({ children, className, ...props }, ref) => {
Our Libraries
{description}
-
-
- +
- { McKeldin Library (Main) -
- +
- { Architecture Library -
- +
- { Art Library -
- +
- { Hornbake Library -
- +
- { Michelle Smith Performing Arts Library -
- +
- { Priddy Library (Universities at Shady Grove) -
- +
- { Severn Library -
- +
-
{
Library Information
-
-
- +
- { Library Hours -
- +
- { Libraries' Directory -
- +
-
{
Get Involved
-
-
- +
- { Support the Libraries -
- +
-
{
Services & Support
-
-
- +
- { Ask a Librarian -
- +
- { Share Feedback -
- +
-
{
Stay Connected
-
-
- +
- { -
- +
- { -
- +
- { -
- +
-
{
+ return classes.filter(Boolean).join(" ");
+};
+
+const BASE_NAVIGATION_CLASSES = "";
+
+const Navigation = forwardRef(({ children, className, ...props }, ref) => {
+ const navigationClasses = cn(BASE_NAVIGATION_CLASSES, className);
+
+ const [isPreviousMenu, setIsPreviousMenu] = useState(false);
+
+ const handleBackClick = () => {
+ setIsPreviousMenu(!isPreviousMenu);
+ };
+
+ return (
+
+ + ); +}); + +Navigation.displayName = "Navigation"; + +export default Navigation; diff --git a/components/navigation/NavigationV1.css b/components/navigation/NavigationV1.css new file mode 100644 index 0000000..f34e584 --- /dev/null +++ b/components/navigation/NavigationV1.css @@ -0,0 +1,578 @@ +header { + width: 100%; +} + +header ul { + padding: 0; + margin: 0; +} + +header li { + list-style: none; +} + +header a { + text-decoration: none; +} + +header a:hover, +header a:focus { + text-decoration: none; +} + +header button { + background: none; + border: none; + padding: 3px 0px; + margin: 0; + font: inherit; + color: inherit; + cursor: pointer; + outline: none; +} + +header button .i-chevron-down, +header span .i-chevron-down { + background-position-x: 2px; + background-position-y: 6px; +} + +.header--content { + max-width: 1680px; + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row; + + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.header--logo { + height: 4rem; +} + +.header--logo img { + height: 100%; + width: fit-content; +} + +.header--navigation-toggle { +} + +.header--navigation-toggle-container { + display: block; + height: 24px; + width: 24px; + position: relative; +} + +.header--navigation-toggle-icon, +.header--navigation-toggle-icon::before { + content: ""; + position: absolute; + width: 24px; + height: 2px; + background: var(--black); + transition: all 0.5s ease; +} + +.header--navigation-toggle-icon::after { + content: ""; + position: absolute; + width: 16px; + height: 2px; + background: var(--black); + transition: all 0.1s ease-in-out; +} + +.header--navigation-toggle-icon { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.header--navigation-toggle-icon::before { + top: -8px; + left: 0; +} + +.header--navigation-toggle-icon::after { + bottom: -8px; + left: 8px; +} + +.header--navigation-toggle:checked + ~ .header--navigation-toggle-container + .header--navigation-toggle-icon { + background: transparent; +} + +.header--navigation-toggle:checked + ~ .header--navigation-toggle-container + .header--navigation-toggle-icon::before { + top: 0; + transform: rotate(45deg); +} + +.header--navigation-toggle:checked + ~ .header--navigation-toggle-container + .header--navigation-toggle-icon::after { + top: 0; + left: 0; + width: 24px; + transform: rotate(-45deg); +} + +.header--rows { + position: fixed; + top: 112px; + left: 0; + width: 100%; + height: calc(100vh - 112px); + transform: translateX(-100%); + transition: transform 0.3s ease; + list-style: none; + padding: 1.5rem; + + border-bottom: 8px solid var(--maryland-red); + + overflow: hidden; + overflow-y: auto; +} + +.header--navigation-toggle:checked ~ .header--rows { + transform: translateX(0); +} + +.header--rows ul.header--menu-main li { + padding-bottom: 1.5rem; + padding-left: 1rem; + padding-right: 1rem; + margin-bottom: 1.5rem; + margin-right: 0rem; + + display: flex; + justify-content: space-between; + + border-bottom: solid 1px var(--light-gray); +} + +.header--rows ul li button div { + transform: rotate(270deg); +} + +.header--rows ul li a { + font-size: 1.125rem; +} + +.header--rows ul.header--menu-sub li { + padding-bottom: 1rem; + padding-left: 1rem; + padding-right: 1rem; + margin-bottom: 0.75rem; + margin-right: 0rem; + + display: flex; + justify-content: space-between; +} + +.header--rows ul.header--menu-sub li:nth-last-child(2) { + padding-bottom: 1.5rem; + margin-bottom: 1.5rem; + border-bottom: solid 1px var(--light-gray); +} + +.header--rows ul.header--menu-sub li a { + font-size: 1rem; +} + +.header--rows ul.header--menu-sub li:last-child a { + font-size: 1.125rem; + font-weight: 700; +} + +.header--rows .header--menu-main-dropdown-container { + position: fixed; + top: 47px; + left: 0; + width: 100%; + height: fit-content; + transform: translateX(100%); + transition: transform 0.3s ease; + list-style: none; + /* padding: 1.5rem; */ + + overflow-y: auto; +} + +.menu-item-button:checked ~ .header--menu-main-dropdown-container { + transform: translateX(0); +} + +.menu-item-button:checked ~ .header--rows { + transform: translateX(-100%); +} + +.header--row-main { +} + +.header--menu-main, +.header--menu-sub { + display: flex; + flex-direction: column; +} + +/* .header--menu-main-dropdown-container, +.header--menu-sub-dropdown-container { + display: none; +} */ + +/* Tablet */ +@media (min-width: 768px) { + .header--rows { + padding: 1.5rem 3rem 3rem 3rem; + } +} + +/* custom breakpoint for navigation */ +/* show all links */ +@media (min-width: 1200px) { + /* make sub menu appear on top while maintaining accessibility */ + .header--logo { + height: 5rem; + } + + .header--rows { + display: flex; + flex-direction: column-reverse; + align-items: end; + } + + .header--navigation-toggle { + display: none; + } + + .header--menu-main, + .header--menu-sub { + flex-direction: row; + } + + .header--menu-main-item { + position: relative; + } + + .header--menu-main-item:last-child { + margin-right: 0rem; + } + + .header--menu-main-item > button { + transform: rotate(0deg) translateY(0); + transition: transform 0.5s; + } + + .header--menu-main-item:hover > button, + .header--menu-main-item:focus > button { + transform: rotate(180deg) translateY(-4px); + } + + .header--menu-main-dropdown-container { + padding-top: 1rem; + + min-width: 18rem; + width: fit-content; + + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + transition: transform 0.5s; + + display: none; + } + + .header--menu-main-item:last-child .header--menu-main-dropdown-container { + transform: translateX(-80%); + } + + .header--menu-main-sub { + border-top: 2px solid var(--maryland-red); + box-shadow: -1px 9px 32px -10px rgba(0, 0, 0, 0.19); + } + + .header--menu-main-sub li { + margin-bottom: 1.5rem; + } + + .header--menu-main-sub li:last-child { + margin-bottom: 0rem; + } + + .header--menu-main-item:hover .header--menu-main-dropdown-container, + .header--menu-main-item:focus .header--menu-main-dropdown-container { + display: block; + } + + .header--row-sub { + margin-bottom: 1rem; + } + + .header--row-sub ul li:not(:last-child) { + margin-right: 1rem; + } + + .header--row-sub ul li:not(:first-child) { + padding-left: 1rem; + border-left: 1px solid var(--light-gray); + } + + .header--menu-sub-dropdown-container { + display: none; + } +} + +/* +:host { + display: block; +} + +:host { + color: #000000; +} + +:host * { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +div { + line-height: 1; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; + line-height: inherit; + color: #000000; +} + +p { + color: #454545; +} + +a { + text-decoration: inherit; + color: inherit; +} + +address { + font-style: normal; +} + +date { + color: #7f7f7f; +} + +strong, +b { + font-weight: 700; +} + +em, +i { + font-style: italic; +} + +button { + border: none; + background: none; + cursor: pointer; +} + +img { + max-width: 100%; + display: block; +} + +.sr-only { + clip: rect(0, 0, 0, 0); + border-width: 0; + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.nav-item-container { + container: umd-element-nav-item / inline-size; + position: relative; + z-index: 9999; +} + +.nav-item-container a { + font-family: "Interstate", Helvetica, Arial, Verdana, sans-serif; + font-size: 14px; + font-weight: 700; + color: #000000; + text-decoration: none; +} + +.nav-item-container:foucs-within .nav-item-dropdown-container { + display: block; +} + +.nav-item-primary-link-container { + position: relative; +} + +.nav-item-primary-link-wrapper { + display: inline-flex; + position: relative; +} + +.nav-item-primary-link-wrapper > a { + color: #000000; + font-size: 16px; + white-space: nowrap; + transition: color 0.2s ease-in-out; + line-height: 1.45em; + font-weight: 700; +} + +.nav-item-primary-link-wrapper > a:hover, +.nav-item-primary-link-wrapper > a:focus { + color: #e21833; +} + +.nav-item-primary-link-wrapper > a[data-selected] span { + display: inline; + position: relative; + background-position: left calc(100% - 0px); + background-repeat: no-repeat; + background-size: 100% 2.5px; + background-image: linear-gradient(#ffd200, #ffd200); +} + +.nav-item-primary-link-button { + align-self: flex-start; + margin-top: 5px; + margin-left: 8px; + transition: transform 0.5s; +} + +.nav-item-primary-link-button svg { + fill: #e21833; + height: 14px; + width: 14px; + transform: rotate(0deg) translateY(0); + transition: fill 0.5s, transform 0.5s; +} + +.nav-item-dropdown-container { + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + min-width: 250px; + width: auto; + padding-top: 16px; + display: none; +} + +.nav-item-dropdown-multiple-column { + display: flex; + justify-content: space-between; +} + +.nav-item-dropdown-multiple-column > * { + min-width: 232px; +} + +.nav-item-dropdown-multiple-column > *:not(:first-child) { + margin-left: 40px; +} + +.nav-item-dropdown-list { + background-color: #ffffff; + border-top: 2px solid #e21833; + padding: 32px; + box-shadow: -1px 9px 32px -10px rgba(0, 0, 0, 0.19); +} + +.nav-item-dropdown-list a { + display: block; + min-width: 120px; + max-width: 230px; + font-weight: 700; + font-size: 14px; + line-height: 1.5em; +} + +.nav-item-dropdown-list a { + position: relative; + text-decoration: none; +} +.nav-item-dropdown-list a:hover > *:not(svg):not(.sr-only), +.nav-item-dropdown-list a:focus > *:not(svg):not(.sr-only) { + background-size: 100% 2px; +} +.nav-item-dropdown-list a > *:not(svg):not(.sr-only) { + display: inline; + position: relative; + background-position: left bottom; + background-repeat: no-repeat; + transition: background 0.5s; + background-size: 0 2px; + background-image: linear-gradient(#e21833, #e21833); +} + +.nav-item-dropdown-list a:hover, +.nav-item-dropdown-list a:focus { + color: #e21833; +} + +.nav-item-dropdown-list a + a { + margin-top: 24px; + display: block; +} + +.nav-item-dropdown-list a[data-selected] span:not(.sr-only) { + display: inline; + position: relative; + background-position: left calc(100% - 0px); + background-repeat: no-repeat; + background-size: 100% 2.5px; + background-image: linear-gradient(#ffd200, #ffd200); +} + +.nav-item-dropdown-list a[data-selected]:hover span, +.nav-item-dropdown-list a[data-selected]:focus span { + border-bottom: none; +} + +.nav-item-dropdown-cta-column > * { +} + +.nav-item-container[data-dropdown][data-showing] .nav-item-dropdown-container { + display: block; +} + +.nav-item-container[data-dropdown][data-showing] .nav-item-primary-link-button { + transform: rotate(180deg) translateY(4px); +} + +.nav-item-container[data-dropdown] + .nav-item-primary-link-wrapper + > a[data-selected]:before { + bottom: 1px; + right: 20px; +} */ diff --git a/components/navigation/NavigationV1.js b/components/navigation/NavigationV1.js new file mode 100644 index 0000000..caa1591 --- /dev/null +++ b/components/navigation/NavigationV1.js @@ -0,0 +1,642 @@ +// import React, { forwardRef } from "react"; +// import "./Navigation.css"; +// import Image from "next/image"; + +// const cn = (...classes) => { +// return classes.filter(Boolean).join(" "); +// }; + +// const BASE_NAVIGATION_CLASSES = ""; + +// const Navigation = forwardRef(({ children, className, ...props }, ref) => { +// const navigationClasses = cn(BASE_NAVIGATION_CLASSES, className); + +// return ( +//++++ + + ++++ + {/* main navigtaion menu */} +++ ++ {/* sub navigation menu */} ++ +++// +// ); +// }); + +// Navigation.displayName = "Navigation"; + +// export default Navigation; diff --git a/components/navigation/nav.html b/components/navigation/nav.html new file mode 100644 index 0000000..2647faf --- /dev/null +++ b/components/navigation/nav.html @@ -0,0 +1,549 @@ ++//+//+//+// +// + +//+//+//+// +// {/* main navigtaion menu */} +//+//+// +//+// {/* sub navigation menu */} +//+// +//+//+ + + diff --git a/components/navigation/test.html b/components/navigation/test.html new file mode 100644 index 0000000..e007cea --- /dev/null +++ b/components/navigation/test.html @@ -0,0 +1,163 @@ + + + + + ++ + + ++++ + +
+
+
+
+
+ ++ ++ + Mission & Values + + + + Traditions & History + + + + Inclusive Community + + + + Facts & Rankings + + + + Contact Us + ++ ++ University Presidents + + Landmarks + + Athletics Traditions + + Songs + + Traditions of the Past + + Signature Events ++ + + + + + +++ + + ++ ++
+
+
+ + + The Arts + + ++++UMD is home to a vibrant arts community
++ + + + + ++ + + ++ + About + + + + + + + + + Mission & Values + + + + Traditions & History + + + + Inclusive Community + + + + Facts & Rankings + + + + Contact Us + ++ + Academics + + + + + + + + + Colleges & Schools + + + + Undergraduate Programs + + + + Graduate Programs + + + + Academic Support + ++ + Admissions & Aid + + + Student Life + + + + + + + + + Housing & Dining + + + + Athletics & Recreation + + + + Student Organizations + + + + Visit + ++ +++ ++
+
+
+ + + The Arts + + ++++UMD is home to a vibrant arts community
++ + Research + + Checkbox Navigation + + + + + ++ + + diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..d74d1a6 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..051873d --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,223 @@ + + +