I'm using an css only responsive menu on my page. It's basicly uses checkbox with label to open and close the menu.
But i've notice when the page content scroll and I click, it's back to the top. Is there any css only solution for it?!
I'm using this tutorial as reference https://www.sitepoint.com/pure-css-off-screen-navigation-menu/
This is caused because of the a tag.
when clicking <a href="#"><a> the browser reload the page and that is why it jumps to the top.
Change <a> to <span> and your problem should be solved.
of course, you might need to change some css to get the proper styling:
<ul class="navigation">
<!-- Change this to <span> instead of <a> -->
<li class="nav-item"><span>Home</span></li>
...
</ul>
Related
I have a problem adding a dropdown to a Twitter Bootstrap framework. After I have added the dropdown it expands height of the whole topbar and this is what I'm trying to fix.
Page URL is http://locabikes.de/
If you hover the mouse on the "DE" symbol in the upper right corner, the dropdown will show up but the topbar will also change it's vertiacal size covering the navigation bar.
Is there some way to only show other languages to choose without changing the size of a topbar?
This is the code I'm talking about:
<div class="col-sm-12 col-sm-no-pd">
<ul id="lng">
<li>
<span>DE</span>
<ul>
<li>EN</li>
<li>PL</li>
</ul>
</li>
</ul>
<div id="topSocial">
</div>
This is how I want it to look like after hoovering on the current language hyperlink.
Since you are using bootstrap I should suggest changing the markup of ul#lng to the markup given by bootstrap documentation for dropdowns.
http://getbootstrap.com/components/#dropdowns
Dropdown by default works on click but with the following tweak it will also work on hover:
http://www.joostrap.com/support/tutorials-videos/202-how-to-enable-hover-for-nav-dropdowns
Hope this helps you :)
Turned out I only needed to remove
overflow: hidden property from the parent #topbar div and it started working.
I have a responsive website, once the website reaches mobile width the menu gets hidden and only shown when you click the menu icon. This icon is hidden within the HTML until you reach this break point.
Question: what is the correct label that I should be giving the element?
I was thinking of adding aria-hidden="true" which is correct for desktop browsers but on mobile it's not hidden.
<a href="#" id="menu-phone" data-menu="mobile" title="Show Menu">
<span>Menu</span>
<i class="icon"></i>
</a>
aria-hidden="true" wouldn't be necessary because:
on desktop the link is already hidden in CSS (by display: none or visibility: hidden)
on mobile it's shown and must be perceived by screen readers and other ATs
I guess the element a > span is visually hidden (out of the viewport) and only the icon in i is shown on mobile? Then you could have the text "Show menu" in it and no other attributes, whether ARIA or #title would be necessary.
If "Menu" is shown, then yes the link title a[title="Show Menu"] is better for a more explicit link.
Beware: if you're using ARIA role landmarks (and you should), [role="navigation"] should be added to a container of both your navigation visible on desktop and this link that's the only visible part of your navigation on mobile. Otherwise the user will jump to an invisible nothing with no clue of where the navigation is and no clue either that there's a special link/button to show it again.
Same for skip links: it should point to an element placed before both the navigation and this link/button.
I have a fixed menu bar at the top of my site. I have a page that has inline linking by adding a hash tag to the URL making it jump to that particular element. The problem is the element it jumps to is hidden being this fixed menu bar. Is there a way to move the jump down a bit? Here is an example:
Example
Sadly you cannot do that via html, you'd need some JS, or even CSS, depending on your code.
Can you post a sample on jsfiddle.net ?
As a workaround, add another (hidden) element below it and simply link to that one instead:
click me
<!-- further down the page is the content -->
<div id="#element1">Here is what users will be reading!</div>
<div id="#element1-target"
style="visibility:hidden;{make this lower down below the actual text}"></div>
My only question though, is if your header bar is blocking your text that the page 'jumps' to, wouldn't you want the page to link to higher than the target?
Given your question is vague and I don't think your example shows what your problem is, this should do what (i think) you're trying to do.
:)
I'm developing Chrome plugin. I would like to implement its interface as line with content that will be displayed before site content starts (similar to stackoverflow information bar). I'm not good at HTML and CSS.
1. How can I implement it to work correclty at any site?
2. What HTML code is best to use to make rectangle that will be correctly displayed at top of any site?
1- Make sure the HTML you inject is right after the Body Tag.
2- With CSS, put it Width 100%; position: fixed (it is always on the top of the browser) or position: absolute (always on the top of page); top:0; z-index: 999 (its always on top)
(Some minor adjustments might be to do, Its off the top of my head)
3- Aim for the first element after your bar (should be a container) and apply it a margin-top of the height of your added element.
Should create a bar on top where you can put any thing you want.
The simplest way to do it is to just add a <div> to the beginning of the body:
<!-- old -->
<body>
<div id="header">
<h1>Hello, world!</h1>
<!-- ... -->
<!-- new -->
<body>
<div>Your content goes here.</div>
<div id="header">
<h1>Hello, world!</h1>
<!-- ... -->
Because the <div> is a block-level element, it should stretch across the screen by default, and then you can style it however you like.
However, there are two basic problems:
The site's CSS interferes with your bar. This could show up in the form of styles that you make sure you declare, so that your bar doesn't look funny. Or it could mean that some elements on the page were positioned absolutely, and you adding the bar breaks the layout.
The site's JS interferes with your bar. If the site itself dynamically adds elements to the beginning of the <body>, then your bar will be pushed down the page. What if the JS selects all the <div>s on the page, and fades them out?
I'm using the simplest HTML 'overflow: scroll' type mark-up for creating a scroll bar within multiple div containers to display text and image content within the scroll. I have it setup within tabbed content areas, that are pulled together calling divs within the tab links. I'm trying to figure how, if possible, that when a user browses to a different tab and then back - to allow that scroll bar to reload to the top, ready to scroll downward again.
Pretty much, the mark-up;
<li class="newtab">
<!--JS Rollover Button for Tab-->
<img src="img/Btns/tab_recordedattack_off1.png" name=tab_recordedattack_off1 border=0>
<!--End JS Rollover Button for Tab-->
</li>
</ul>
<div class="tab_container">
<div id="tab13" class="tab_content">
<div class="tabright">
<div style="border:0px solid black;width:500px;height:400px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;">
I've been thinking about trying to set a simple html anchor point at the top of scroll areas and somehow call to it within the tab links - but can't figure out how to do that.
Any suggestions? - How can I point the tabbed links to the content and the anchor point?
You can use jQuery to reset the scroll: http://jsfiddle.net/Cqhch/
$("button").click(function(){
$("div:first").scrollTop(0);
});