Skip to content

Commit

Permalink
Méli-mélo - 2023-09-menu - Update (#2308)
Browse files Browse the repository at this point in the history 
Switched to using data-ajax-replace to fix CSS bug in Basic HTML mode
  • Loading branch information
@nfrenette
nfrenette authored Jan 15, 2024
1 parent 32c1dc6 commit 4c392da
Show file tree
Hide file tree
Showing 8 changed files with 174 additions and 168 deletions.
24 changes: 6 additions & 18 deletions méli-mélo/2023-09-menu/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,28 +12,16 @@ <h1>About - Campaign Menu</h1>
<p>Example of a new menu that uses megamenu for md and lg, and GCWeb menu for sm and xs.</p>
</div>
<div class="container">
<nav class="gcweb-menu campaign-menu" typeof="SiteNavigationElement">
<nav class="gcweb-menu campaign-menu" typeof="SiteNavigationElement" data-megamenu-ajax="ajax/wet-mega-menu.html">
<h2 class="wb-inv">Winterlude Site Menu</h2>
<button type="button" aria-haspopup="true" aria-expanded="false"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
<ul role="menu" aria-orientation="vertical">
<li role="presentation"><a role="menuitem" tabindex="-1" href="./index.html">Home</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="./calendar.html">Calendar</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" aria-haspopup="true" aria-controls="sub-menu-1" aria-expanded="false" href="#">What's happening</a>
<ul id="sub-menu-1" role="menu" aria-orientation="vertical">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Venues</a></li>
</ul>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sculptures</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" aria-haspopup="true" aria-controls="sub-menu-2" aria-expanded="false" href="#">About</a>
<ul id="sub-menu-2" role="menu" aria-orientation="vertical">
<li role="presentation"><a role="menuitem" tabindex="-1" href="./about.html">About Winterlude</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Over the years</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Media</a></li>
</ul>
</li>
<ul role="menu" aria-orientation="vertical" data-ajax-replace="ajax/gcweb-menu.html">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.html">Home</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="calendar.html">Calendar</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="about.html">About</a></li>
</ul>
</nav>
</div>
</div>
<div class="container mrgn-tp-xl">
<h2>Test content</h2>
<p>Lorem</p>
Expand Down
8 changes: 8 additions & 0 deletions méli-mélo/2023-09-menu/ajax/gcweb-menu.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.html">Home</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="calendar.html">Calendar</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" aria-haspopup="true" aria-controls="gc-sub-menu-1" aria-expanded="false" href="#">About</a>
<ul id="gc-sub-menu-1" role="menu" aria-orientation="vertical">
<li role="presentation"><a role="menuitem" tabindex="-1" href="about.html">About Winterlude</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="media.html">Media</a></li>
</ul>
</li>
13 changes: 13 additions & 0 deletions méli-mélo/2023-09-menu/ajax/wet-mega-menu.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<div class="pnl-strt nvbar">
<h2>Winterlude Site Menu</h2>
<ul class="list-inline menu" role="menubar">
<li><a href="index.html" class="item">Home</a></li>
<li><a href="calendar.html" class="item">Calendar</a></li>
<li><a href="#wet-sub-menu-1" class="item">About</a>
<ul class="sm list-unstyled" id="wet-sub-menu-1" role="menu" >
<li><a href="about.html">About Winterlude</a></li>
<li><a href="media.html">Media</a></li>
</ul>
</li>
</ul>
</div>
24 changes: 6 additions & 18 deletions méli-mélo/2023-09-menu/calendar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,16 @@ <h1>Calendar with global GCMenu - Campaign Menu</h1>
<p>Example of a new menu that uses megamenu for md and lg, and GCWeb menu for sm and xs.</p>
</div>
<div class="container">
<nav class="gcweb-menu campaign-menu" typeof="SiteNavigationElement">
<nav class="gcweb-menu campaign-menu" typeof="SiteNavigationElement" data-megamenu-ajax="ajax/wet-mega-menu.html">
<h2 class="wb-inv">Winterlude Site Menu</h2>
<button type="button" aria-haspopup="true" aria-expanded="false"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
<ul role="menu" aria-orientation="vertical">
<li role="presentation"><a role="menuitem" tabindex="-1" href="./index.html">Home</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="./calendar.html">Calendar</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" aria-haspopup="true" aria-controls="sub-menu-1" aria-expanded="false" href="#">What's happening</a>
<ul id="sub-menu-1" role="menu" aria-orientation="vertical">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Venues</a></li>
</ul>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sculptures</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" aria-haspopup="true" aria-controls="sub-menu-2" aria-expanded="false" href="#">About</a>
<ul id="sub-menu-2" role="menu" aria-orientation="vertical">
<li role="presentation"><a role="menuitem" tabindex="-1" href="./about.html">About Winterlude</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Over the years</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Media</a></li>
</ul>
</li>
<ul role="menu" aria-orientation="vertical" data-ajax-replace="ajax/gcweb-menu.html">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.html">Home</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="calendar.html">Calendar</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="about.html">About</a></li>
</ul>
</nav>
</div>
</div>
<div class="container mrgn-tp-xl">
<h2>Test content</h2>
<p>Lorem</p>
Expand Down
42 changes: 19 additions & 23 deletions méli-mélo/2023-09-menu/campaign-menu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,41 @@
background: #003c77;
color: #fff;
}
/* remove table cell and text shadow*/
/* remove table cell and text shadow */
#wb-sm.campaign-menu .menu {
border-right: 0px !important;
display: block;
text-shadow: none;
}

/* focus within mneu itme background */
/* focus within menu item background */
#wb-sm.campaign-menu .menu .active,
#wb-sm.campaign-menu .menu .wb-navcurr {
#wb-sm.campaign-menu .menu .wb-navcurr,
#wb-sm.campaign-menu .menu > li a:focus {
background: #ccc !important;
color: #333 !important;
}

#wb-sm.campaign-menu .menu > li {
border-left: 1px solid #003c77;
}

#wb-sm.campaign-menu .menu > li:last-child {
border-right: 1px solid #003c77;
}

/* adjust menu padding to align height with GCMenu button */
#wb-sm.campaign-menu .menu > li a {
padding: 0.5em 1em;
}

/* change menu item on-hover background*/
/* change menu item on-hover background */
#wb-sm.campaign-menu .menu > li a:hover{
background: #ccc !important;
color: #333 !important;
}

/* change menu item on-focus background */
#wb-sm.campaign-menu .menu > li a:focus{
background: #003c77 !important;
color: #fff !important;
}
/* change menuitem text color when mouse move to submenu item*/
/* change menuitem text color when mouse move to submenu item */
#wb-sm.campaign-menu .menu > li.active > a{
background: #ccc!important;
color: #333!important;
Expand All @@ -46,7 +50,7 @@
color: #333 !important;
}

/* hover on submenu item*/
/* hover on submenu item */
#wb-sm.campaign-menu .sm.open li a:active,
#wb-sm.campaign-menu .sm.open li a:focus,
#wb-sm.campaign-menu .sm.open li a:hover {
Expand All @@ -59,15 +63,6 @@
border-bottom: 5px solid #003c77 !important;
}


/* add right border for last child item on md screen */
@media screen and (max-width: 1199px) {
#wb-sm.campaign-menu .menu > li:last-child {
border-right: 1px solid #999;
}
}


/*** GCWEB Menu ***/
/* default color */
.gcweb-menu.campaign-menu button[aria-haspopup=true] {
Expand All @@ -85,7 +80,7 @@
/* button closed */
.gcweb-menu.campaign-menu button[aria-haspopup=true]:focus {
background-color: #003c77 !important;
border: 1px dotted #fff; /* For focus - Make sure the */
border: 1px dotted #fff;
color: #fff;
}

Expand All @@ -99,7 +94,8 @@
background-color: #003c77 !important;
color: #fff;
}
/* remove boder lines */

/* remove border lines */
.gcweb-menu.campaign-menu [role=menuitem],
.gcweb-menu.campaign-menu [role=menuitem]:visited,
.gcweb-menu.campaign-menu [role=menu] > li,
Expand All @@ -110,7 +106,7 @@
border: none;
}

/* submenu background and text color*/
/* submenu background and text color */
.gcweb-menu.campaign-menu [role=menu] [role=menu] li [role=menuitem] {
background-color: #e1e1e1 !important;
color: #333;
Expand Down
Loading

0 comments on commit 4c392da

Please sign in to comment.