On the following site http://haircolourideas.eu/#section2 I have a ul in the services section and the li's have background images . The li's have classes of service1 , service2 etc. The background images have suddenly become invisible . If I inspect element the css is correct and it shows that the images are present . The site has been live a couple of months and without me changing anything this has just happened today
<ul id="services-list" class="hidden">
<li class="service1 service-img"><label class="btn" for="modal-1"><h3>meche</h3></label></li>
<li class="service2 service-img"><label class="btn" for="modal-2"><h3>tinting</h3></label></li>
<li class="service3 service-img"><label class="btn" for="modal-3"><h3>fashion</h3></label></li>
<li class="service4 service-img"><label class="btn" for="modal-4"><h3>change</h3></label></li>
</ul>
.service1 {
background: url(../img/meche1.png);
cursor: pointer;
}
.service2 {
background: url(../img/tint1.png);
cursor: pointer;
}
.service3 {
background: url(../img/fashion1.png);
cursor: pointer;
}
.service4 {
background: url(../img/change1.png);
cursor: pointer;
}
Remove class hidden from thoes nodes:
<div id="services-info" class="hidden">
<ul id="services-list" class="hidden">
<ul id="services-list" class="hidden">
<li class="service1 service-img"><label class="btn" for="modal-1"><h3>meche</h3></label></li>
<li class="service2 service-img"><label class="btn" for="modal-2"><h3>tinting</h3></label></li>
<li class="service3 service-img"><label class="btn" for="modal-3"><h3>fashion</h3></label></li>
<li class="service4 service-img"><label class="btn" for="modal-4"><h3>change</h3></label></li>
Remove the class="hidden" from your ul
The problem is that the animation doesn't function because in the ul you have class="hidden" which makes opacity: 0 that hides all the ul section. The class="hidden" is applied because you are missing this script in your server jquery.viewportchecker.js. If you open your console with inspect element you can see the error. The script makes the class hidden apply or not based on the section you are. In some way the script got deleted from your server as you can see in the link: http://haircolourideas.eu/js/jquery.viewportchecker.js so you had to put it back and with that also this jquery error:
"Uncaught TypeError: jQuery(...).addClass(...).viewportChecker is not a function"
in you console will disappear and the website will function as before
You can try this: i can say surely show your image.
.hidden {
/* opacity: 0; */
}
If don't need then remove opacity:0 property, otherwise set
opacity: 1;
Otherwise You can remove hidden class from ul
Just remove the class hidden means
<ul id="services-list" class="hidden"> not visible
<ul id="services-list" class=""> visible
Related
I have created a JavaScript-free, HTML- and CSS-only drop-down menu using the checkbox hack. I am trying to avoid using JS as some users disable it. For touch-screens and mouse it works fine, but I am attempting to make it work so that anyone using keyboard navigation can use it.
It does work more or less:
The [Enter] key opens links and [spacebar] opens some (see further) sub-menus using checkboxes which are invisible to the naked eye by using the class opacity: 0;.
However, I have two contradictory problems with keyboard navigation:
The <a> tags and pseudo ::after elements associated with some checkboxes focus visibly with a faint dotted highlight but do not open when the spacebar is pressed.
When using a <span> tag instead of an <a> tag, the menus open when the spacebar is pressed but they are not visibly 'focused' with the dotted outline.
Also, the 'invisible' checkbox is positioned behind the ::after pseudo element of '+' but, because it's invisible, there is no focus outline.
Here is my simplified code with examples of the different combinations I have tried:
ul.menubar {
padding: 1rem 0 0 0.5rem;
}
[id^=chk] {
opacity: 0;
}
[id^=chk]+ul {
display: none;
}
[id^=chk]:checked+ul {
display: block;
}
label.link::after,
label span.separator::after,
label a.separator::after {
position: relative;
content: "+";
right: -1.25rem;
top: 0;
}
a {
text-decoration: none;
}
li {
line-height: 2.5rem;
font-size: 1.25rem;
list-style: none;
}
li a,
li span,
li label,
li input,
.inline {
display: inline;
position: relative;
}
<body>
<nav>
<ul class="menubar" role="menubar">
<li>
<div class="inline">Item link plus dropdown using span. + works but no keyboard focus |
<label for="chk-101" class="link" title="Item 1 link" aria-label="Item 1 link"></label></div><input id="chk-101" type="checkbox" class="chkbox" tabindex="1" aria-checked="false">
<ul>
<li>Dropdown 1a</li>
<li>Dropdown 1b</li>
</ul>
</li>
<li>Item link plus dropdown using 'a' tag with href; + works but not keyboard focused |
<label class="link" for="chk-102"></label><input id="chk-102" type="checkbox" class="chkbox" tabindex="1" aria-checked="false">
<ul>
<li role="menuitem" tabindex="1">Dropdown 2a</li>
<li role="menuitem" tabindex="1">Dropdown 2b</li>
</ul>
</li>
<li>
<label for="chk-103"><span class="separator">Separator with span - does not focus</span></label><input id="chk-103" type="checkbox" class="chkbox" tabindex="1" aria-checked="false">
<ul>
<li role="menuitem" tabindex="1">Dropdown 3a</li>
<li role="menuitem" tabindex="1">Dropdown 3b</li>
</ul>
</li>
<li>
<label for="chk-104">Separator with href - focus does not respond to spacebar</label><input id="chk-104" type="checkbox" class="chkbox" tabindex="-1" aria-checked="false">
<ul>
<li role="menuitem" tabindex="1">Dropdown 3a</li>
<li role="menuitem" tabindex="1">Dropdown 3b</li>
</ul>
</li>
<li>
<label for="chk-105"><span class="separator" role="checkbox" tabindex="1" aria-checked="false" aria-label="Separator 2">Separator with span role="checkbox"; focus but does not respond to spacebar</span></label>
<input id="chk-105" type="checkbox" class="chkbox" tabindex="-1" aria-checked="false">
<ul>
<li role="menuitem" tabindex="1">Dropdown 3a</li>
<li role="menuitem" tabindex="1">Dropdown 3b</li>
</ul>
</li>
</ul>
</nav>
</body>
Short Answer
The checkbox hack is not a good practice, especially for navigational menus and is not semantically correct, generally causing accessibility nightmares.
As "JavaScriptless" users are around 1.3% of users you should provide a usable but perhaps ugly version of the menu for them and make sure that for the majority of users everything is semantically correct.
Please note: The advice here is for navigational drop-downs, if this is for a complex application where the drop-down triggers functions on the current page rather than navigation then other patterns may be better.
Long Answer
I would normally address the question being asked but you are making things very difficult for yourself and I think it would be better to provide an alternative.
I have listed the reasons why not to use the checkbox hack and provided an explanation of a much simpler, more robust and much more accessible solution which should hopefully help you going forward.
First, the bad news
I hate to say it but you will never make the above accessible without JavaScript and your current implementation has quite a few accessibility issues.
First of all aria-checked needs to be toggled and you can only do that with JavaScript. Also a checkbox is not a logical / semantically correct element to use here and does not convey the right information to screen readers. If you then add role="button" to counter this then aria-checked is not a valid attribute.
Secondly the "checkbox hack" is not intended for navigational menus it is intended to be used for complex menus as part of an application, it is still not a good pattern to use then and should only be used if you are really struggling to make other options work.
Thirdly pseudo elements (your "+" symbol) are not focusable and a lot of screen readers ignore them / don't behave well with them, so that is a big accessibility problem.
Fourthly anywhere where you are using <a href="#" is an accessibility anti-pattern. Anchors should only be used for navigation, <button> elements are for same page actions / functions. This is down to how they are announced to screen readers and expected behaviour. If you use a hyperlink it must contain a full and valid href either to an anchor on the current page or an entirely new page.
There are other issues but hopefully you get the idea!
Never fear, there is an easier way to do this!
Your main concern is that your menu works without JavaScript, which is causing you to choose hacks over the best and easiest ways to do things.
Here is the simplest way to create an accessible experience for all.
Create an HTML sitemap with anchors at key points.
Make the "button" an anchor and point the href to the relevant part of the sitemap.
Use JavaScript to intercept the request and open the drop-down menu / toggle aria attributes for the majority of users who have JavaScript enabled.
This way there is still a way to navigate the site if JavaScript is disabled, but for majority of users you have a drop-down menu.
Rough example
In the below example I have covered most accessibility issues.
No JavaScript
The raw HTML is valid and points to an HTML sitemap (which in the example is simulated with anchors further down the page, you should obviously have this on another page!).
If your sitemap is particularly large then you should use ids at the relevant parts of the page and link to those anchors directly (i.e. yoursite.com/sitemap#a-particular-category-or-main-menu-item). I have included this as part of the example as well.
To test the above I have included a checkbox that removes all the relevant event handlers and aria attributes so you can experience the "javaScriptless" experience.
With JavaScript
If JavaScript is available then we add the relevant role="button" to the link, we also add the aria-expanded attribute that we can later toggle to tell screen reader users if the menu is open or not and the aria-haspopup attribute so they know that the "button" will open a popup.
As we have told screen readers that the hyperlink is now a button with role="button" we allow them to activate the "button" with the space key as that is expected behaviour.
Finally they can close the drop-down with the Esc key as a "nice to have", this is not essential for navigational menus as they should not trap focus but I always like to add it, although I haven't dealt with returning focus to the parent item (something for you to consider).
I also ensured that the tap target was 44px by 44px to ensure it passes 2.5.5 tap target size as that was another issue with your example.
As a "+" is not very informative for screen reader users I also added some visually hidden text to explain what the toggle button does. I also toggle this button text depending on whether the drop-down is open or closed. This is done at the same time as toggling aria-expanded to make things perfectly clear for screen reader users.
There may be things I have missed in the following example so please test it thoroughly before using it in production. Also apologies I wrote this as I thought of things that needed addressing so the code is probably a bit messy.
var toggles = document.querySelectorAll(".menu-toggle");
// add the relevant aria, role and handler
var init = function(){
for(var x = 0; x < toggles.length; x++){
var el = toggles[x];
el.setAttribute("role", "button");
el.setAttribute("aria-expanded", "false");
el.setAttribute("aria-haspopup", "true");
el.addEventListener('click', openToggle);
el.addEventListener('keydown', keydownHandler);
document.addEventListener('keydown', closeAllHandler);
}
}
init();
function keydownHandler (e) {
//space key
if (e.keyCode === 32) {
openToggle(e);
}
}
function closeAllHandler(e){
// esc key
if (e.keyCode === 27) {
var openItems = document.querySelectorAll(".open");
for(var x = 0; x < openItems.length; x++){
openItems[x].classList = "";
}
}
}
//handler for when the "+" button is pressed, the second parameter is a quick way to recycle the function as a close function
function openToggle(e, close){
e.preventDefault();
var self = e.currentTarget;
var dropDown = getNextSibling(self, "ul");
if(dropDown.classList == "open" || close){
dropDown.classList = "";
self.setAttribute("aria-expanded", "false");
self.querySelector('.icon').innerHTML = "+";
self.querySelector('.toggleText').innerHTML = "show submenu";
}else{
dropDown.classList = "open";
self.setAttribute("aria-expanded", "true");
self.querySelector('.icon').innerHTML = "-";
self.querySelector('.toggleText').innerHTML = "close submenu";
}
}
// helper function to grab next sibling by selector.
var getNextSibling = function (el, sel) {
var sib = el.nextElementSibling;
if (!sel) return sib;
while (sib) {
if (sib.matches(sel)) return sib;
sib = sib.nextElementSibling
}
};
//////////////////////////////DEMO ONLY NOT NEEDED IN PRODUCTION///////////////////////////////////
//just for the demo, allows usa to simulate JavaScript being switched off
document.getElementById("jsActivated").addEventListener('change', adjustJS);
function adjustJS(e){
if (!e.target.checked) {
init();
} else {
destroy();
}
};
// just for the demo, used to remove event listener and role
var destroy = function(){
for(var x = 0; x < toggles.length; x++){
var el = toggles[x];
el.removeAttribute("role");
el.removeAttribute("aria-expanded");
el.removeAttribute("aria-haspopup");
el.removeEventListener('click', openToggle);
el.removeEventListener('keydown', keydownHandler);
}
}
.has-submenu>ul{
display: none;
}
.has-submenu>ul.open{
display: block;
}
li{
padding: 10px;
}
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
.menu-toggle{
height: 44px;
width: 44px;
outline: 2px solid #666;
display: inline-block;
line-height: 44px;
font-size: 25px;
text-align: center;
text-decoration: none;
margin-left: 10px;
}
<label>Simulate JavaScript Off?
<input type="checkbox" id="jsActivated"/>
</label>
<h1>Example Accessible Menu</h1>
<nav aria-label="Main Navigation">
<ul>
<li class="has-submenu">
Some Category
<a class="menu-toggle" href="#sitemap-item1">
<span class="icon">+</span>
<span class="visually-hidden">
<span class="toggleText">show submenu</span> for "Some Category"
</span>
</a>
<ul>
<li>Some Category Item 1</li>
<li>Some Category Item 2</li>
</ul>
</li>
<li class="has-submenu">
This is a different category
<a class="menu-toggle" href="#sitemap-item2" aria-expanded="false" aria-haspopup="true">
<span class="icon">+</span>
<span class="visually-hidden">
<span class="toggleText">show submenu</span> for "This is a different category"
</span>
</a>
<ul>
<li>Different Category Item 1</li>
<li>Different Category Item 2</li>
</ul>
</li>
</ul>
</nav>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<strong>Scroll up to get back to menu, this is to simulate another page</strong>
<h2>The sitemap located on another page</h2>
<ul>
<li id="sitemap-item1">Some Category
<ul>
<li>Some Category Item 1</li>
<li>Some Category Item 2</li>
</ul>
</li>
<li id="sitemap-item2">This is a different category
<ul>
<li>Different Category Item 1</li>
<li>Different Category Item 2</li>
</ul>
</li>
</ul>
<strong>Scroll up to get back to menu, this is to simulate another page</strong>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
Codepen: https://codepen.io/anon/pen/LKwQoe
I have the following code:
.required:after {
position: absolute;
color: red;
content: "*";
margin-left: 4px;
}
.myDiv {
background-color: tan;
width: 200px;
}
<div class="myDiv">
<ul>
<li class="required">One</li>
<li class="required">Two</li>
<li class="required">Three</li>
<li class="required">Four</li>
<li class="required">
Five turns out to be long
</li>
</ul>
</div>
With that last li tag, my "required" asterisk gets punted down one line. However, if I write that same exact tag one line like this:
<li class="required">Five turns out to be long</li>
...the asterisk stays on the same line. It seems to be that the first version of the code generates this HTML:
<li class="required">
"
Five turns out to be long
"
::after
</li>
...and the other example generates this:
<li class="required">
"Five turns out to be long"
::after
</li>
I don't understand exactly what's going on here and I lack the language to explain to my coworkers why I need to change some of their tags to be on only one line. What exactly is this behavior, and is it documented anywhere? Thanks!
I have this menu bar, which is replaced by Images.
All looks good on normal view, but when I swtich to mobile view
It looks so clumsy. I tried Padding, But the individual cell do not
make up space with each other.
Here is the screenshot
li.topmenu1 {
height: 20px;
}
<nav id="category" class="drawer_block pc">
<ul class="category-nav">
<li class="topmenu1">
<img src="http://azlily.bex.jp/eccube_1/html/template/default/img/menu/home.png">
</li>
<li class="topmenu2">
<img src="/eccube_1/html/template/default/img/menu/products.png">
</li>
<li class="topmenu3">
<img src="/eccube_1/html/template/default/img/menu/about.png">
</li>
<li class="topmenu4">
<img src="/eccube_1/html/template/default/img/menu/howtouse.png">
</li>
<li class="topmenu5">
<img src="/eccube_1/html/template/default/img/menu/column.png">
</li>
<li class="topmenu8">
<img src="/eccube_1/html/template/default/img/menu/FAQ.png">
</li>
</ul>
</nav>
Note - I also tried to include FULL URL of the image
but somehow its not showing up on snippets :/
check this https://jsfiddle.net/1dvy2854/4/
.category-nav li {
display: inline-block;
}
#media only screen and (max-width: 600px) {
.category-nav li {
display: block;
}
.category-nav li img {
max-width: 65px;
display: inline-block;
}}
Make sure that the elements inside category-nav have correct margins and paddings.
If you want to make sure that the individual pictures for the menu look okay, you might want to set styles for the images one by one.
So, in your case you can edit the heights for all of your topmenu1, topmenu2...
Also, you can the inspect tool on Chrome to find what is causing problems like this in your CSS code. You can change the code live and see what change is causing what.
There is fiddle with my problem.
As I can understand -- link doesn't work, because when I click on the link, link disappear because :focus isn't active anymore. But I can't come up with solution.
I think it's very common problem, but I didn't found any information about this.
Thanks for any help.
CSS:
#search:focus + #results {
display: block;
}
#results {
display: none;
}
HTML:
<input id="search" type="text"/>
<ul id="results">
<li> First </li>
<li> Second </li>
<li> Third </li>
</ul>
Just add a hover method to #results:
#results:hover{display:block;}
http://jsfiddle.net/gc6L323f/3/
I would suggest in your case to include also :hover pseudo class and make the #results object visible on hover.
Like this :
#results:hover {
display: block;
}
You can check working demo.
I'm working on a Shopify project. I am not the designer. I need to make a flyout menu for the shop. The problem is two fold. First of all, the flyout needs to extend to the bottom of the viewport. Secondly, I'd like to bundle everything together in the Navigation Div, but I need to figure out how to break the element out of its parent and then "layer itself" over the rest of the content without moving it around.
I thought I'd just hide the menu with CSS and then use jQuery to un-hide it on rollover. I don't think that will work though. I don't know how to position the flyout so it doesn't schlep everything around.
Here's the site now:
https://hodkiewicz-zieme-and-hirthe180.myshopify.com/
Here's what it should look like: http://tinypic.com/r/35hnyox/6
Here's what's in the nav column currently. I'll probably change the structure.
<div id="navbar" class="green">
<ul id="navigation">
{% for link in linklists.main-menu.links %}
<li><a class="green" href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
<li><a class="green" href="#">{{ linklists.packard.title }}</a>
<ul class="sub-menu">
<li><a class="green" href="#">-1930 Speedster</a></li>
<li><a class="green" href="#">-1929-31 Super 8</a></li>
<li><a class="green" href="#">-Late 1931-32 Super 8</a></li>
<li><a class="green" href="#">-1929-31 Standard 8</a></li>
<li><a class="green" href="#">-Late 1931-32 Standard 8</a></li>
<li><a class="green" href="#">-Rare Parts</a></li>
<li><a class="green" href="#">-745 Parts</a></li>
</ul>
</li>
<li><a class="green" href="#">{{ linklists.cadillac.title }}</a>
<ul class="sub-menu">
<li><a class="green" href="#">-1932-33 V12 & V16</a></li>
<li><a class="green" href="#">-1934-37 V12 & V16</a></li>
</ul>
</li>
<li><a class="green" href="/cart">Cart</a></li>
<li><a class="green" href="/checkout">Check Out</a></li>
</ul><!--Navigation--><!--Navigation-->
<ul class="sub-navs">
<ul class-"sub-nav">
<li>Carburetor</li>
<li>Parts</li>
<li>Manifolds</li>
<li>Accessories</li>
<li>Sculpture</li>
</ul>
</ul>
<img id="#navbar-logo" src="{{'logo.png' | asset_url}}">
<p id="nav-phone" class="black center bold">775.842.4282</p>
<p class="black center nav-small bold">packardcarbs#gmail.com</p>
<p class="black ce
nter nav-small bold">Sparks, NV USA</p>
</div><!--Navbar-->
Here is the desired output with exact functionality required in question.
See fiddle for code : http://jsfiddle.net/NNfUb/2/
Demo: http://jsfiddle.net/NNfUb/2/embedded/result
CSS:
#content
{
position:relative;
}
#flyout_container
{
position:absolute;
width:175px;
top:0;
left:0;
background:#107042;
display:none;
}
.sub-nav
{
padding:0;
margin:0;
display:none;
}
.sub-nav li
{
padding:5px 5px 5px 10px;
display:block;
color:#fff;
font-size:14px;
font-weight:bold;
}
jQuery:
$(document).ready(function(){
var container = $("<div id='flyout_container'>");
container.appendTo($("#content"));
var contentHeight = $("#content").height();
container.css({"height": (contentHeight + 10) + "px"});
$("a#show_sub_nav_1").mouseover(function(){
$("#sub_nav_1").appendTo(container).show();
container.toggle();
//container.show();
var fromTop = parseInt($(this).offset().top);
$("#sub_nav_1").css({"margin-top": (fromTop - 205) + "px"});
});
$("#flyout_container").mouseleave(function(){
$("#flyout_container").hide();
});
});
I have created the above fiddle by copying your source code from your webpage and work on that. I have created the full height functionality which is taking height upto the content height and showing the sub-links as per your desired design provided in screenshot. You need to tweek the css or code if you need any changes or enhancement. It will work on every viewport.
Note: If any issues please let me know. I hope this will solve your problem because i have used different approach.
position: absolute makes the position relative to the nearest non-static-positioned ancestor. So, if you change the navigation ul to position: relative, and the flyout to position: absolute, you will be able to set the position of the flyout menu relative to the main navigation. That means that even if you resize the page, the flyout will still be in the right spot.
#navigation {
position: relative;
}
.flyout {
position: absolute;
top: 0;
left: 100%;
}
(You could also set #navbar or #navigation > li to position: relative instead.)
You'll still need to fiddle with positioning and other styles a bit, but hopefully that sets you on the right path.
Changing the element's position to absolute will allow you to position it accurately without interrupting the flow of the document.
.flyout {
position: fixed;
left: 0px; (number of pixels from the left edge of the document)
top: 0px; (number of pixels from the top edge of the document)
}