Develop Reference

Scroll to horizontally overflowed element

Could anyone suggest how I can define whether a tab is overflowed and how I can scroll to that tab, thus it become not overflowed?
The code snippet below visualizes the problem. The "Four" tab is hidden, and if this tab would be active, the user would have no clue that the "Four" tab is selected on a small device. I'm currently using AngularJS as main framework.
.navigation {
display: flex;
margin: 10px 0;
border: 1px solid red;
border-radius: 5px;
overflow-y: scroll;
}
.navigation > a {
min-width: 200px;
flex: 1;
border-radius: 0;
padding: 5px;
text-align: center;
cursor: pointer;
text-decoration: none;
}
.navigation > a:not(:last-child) {
border-right: 1px solid red;
}
.navigation > a:hover, .navigation > a:active {
background-color: red;
}
<div class='navigation'>
<a>One</a>
<a>Two</a>
<a>Three</a>
<a>Four</a>
</div>

We can first determine the active tab and get its offset position (from left) and apply that value to the scroll (eg: using jQuery scrollLeft) and this will force the scrollbar to scroll to the active tab.

Subcategories in vertical navigation are hidden and not displayed properly

Can someone please tell me how to solve the problem. I recently tried to make a navigation menu for my website which opens subcategories on hover. But the problem is that the subcategory LI items are not displayed properly, they are displayed behind the other objects and are not visible. I tried to put z-index and some other solutions to fix the problem, but I havent managed to do that
Here's a picture that will show you whats the exact problem
http://s27.postimg.org/soa5vro1f/Untitled.jpg
This is the CSS and JS code i used for it, only CSS Code is here:
<style>
#menu-v li, #menu-v a {zoom:1;} /* Hacks for IE6, IE7 */
#menu-v, #menu-v ul
{
width: 180px; /* Main Menu Item widths */
border: 1px solid #ccc;
border-top:none;
position: relative; font-size:0;
list-style: none; margin: 0; padding: 0; display:block;
}
/* Top level menu links style
---------------------------------------*/
.showMe
{
z-index: 99999999999;
}
#menu-v li
{
list-style: none; margin: 0; padding: 0;
}
#menu-v li a
{
font: normal 12px Arial;
border-top: 1px solid #ccc;
display: block;
/*overflow: auto; force hasLayout in IE7 */
color: black;
text-decoration: none;
line-height:26px;
padding-left:26px;
}
#menu-v ul li a
{
}
#menu-v li a.arrow:hover
{
background-image:url(arrowon.gif);
background-repeat: no-repeat;
background-position: 97% 50%;
}
/*Sub level menu items
---------------------------------------*/
#menu-v li ul
{
position: absolute;
width: 200px; /*Sub Menu Items width */
visibility:hidden;
z-index: 9999999999;
}
#menu-v a.arrow
{
background-image:url(arrow.gif);
background-repeat: no-repeat;
background-position: 97% 50%;
}
#menu-v li:hover, #menu-v li.onhover
{
background-position:0 -62px;
}
#menu-v ul li
{
background: rgba(255, 255, 255, 0.86);
background-image:none;
}
#menu-v ul li:hover, #menu-v ul li.onhover
{
background: #eeeeee;
background-image:none;
}
/* Holly Hack for IE \
* html #menu-v li
{
float:left;
height: 1%;
}
* html #menu-v li a
{
height: 1%;
}*/
/* End */
</style>
And this is part of the ul list, the JS code is not included:
<ul id="menu-v">
<li><a class=" arrow" href=""><strong></strong></a>
<ul style="left: 180px; top: 0px; display: none;" class=" sub showMe">
<li ><i class="icon-double-angle-right"></i> Преносни компјутери</li>
<li ><i class="icon-double-angle-right"></i> Опрема за преносни компјутери</li>
<li ><i class="icon-double-angle-right"></i> Таблет компјутери (Tablet PC)</li>
</ul>
</li>

You have a couple problems here:
1. NO INLINE STYLES!
As a rule of thumb, NEVER EVER EVER EVER EVER EVER EVER put styles inline. It is hideous and hard to debug and can't be overridden easily by other CSS. One style in particular, your display:none in your submenu <ul> is causing you grief here.
2. Use display:none in your CSS for your submenu, not visibility:hidden
So to remedy this, you put it in your CSS:
#menu-v li ul
{
display:none;
/*visibility:hidden <----NO!*/
}
3. Use li:hover to show the submenu
#menu-v li:hover ul
{
display:block;
}
Voila!
JSFiddle

Navigational bar

I am trying to create a mouseover navigational site. I have this as my basic design but I wanted to have the main buttons of "Our Team", Locations, and Patient Reources. This is what I had before trying to change to a mouseover scheme...
<div class="title">Division of Gastroenterology</div>
</center>
<div class="left_side">
<p> Staff</p>
<p><b>Faculty</b></p>
<p><b>Fellows</b></p>
<p>Locations</p>
<p><b>Perelman Center for Advanced Medicine</b></p>
<p><b>Presbyterian Medical Center</b></p>
<p><b>Penn Medicine at Radnor</b></p>
<p>Patient Resources</p>
<p><b> Procedure Preps</b></p>
<p><b>Insurance Provider Numbers</b></p>
<p><b>IBD Diet</b></p>
I tried this but am clearly missing something...

what i have done in the past is hide the dropdown off the screen, then when the user hovers over a link bring the dropdown back into view.
I accomplished this by using unorderd lists like this:
<ul id="nav">
<li>Home
<ul>Link 1</ul>
<ul>Link 2</ul>
<ul>Link 3</ul>
</li>
...
</ul>
And in the CSS set the main <li>'s position to relative, the dropdown to absolute and :hover of the dropdown sets the left position to 0
/* --- MAIN LINK --- */
#nav li{
float:left;
margin-right:35px;
position:relative;
}
/*--- DROPDOWN ---*/
#nav ul{
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav li:hover ul{
left:0; /* Display the dropdown on hover */

I think you are trying to create a navigational bar as inferred from the information you've posted as well as your general question.
To implement this fully would require a bit of editing and explanation - which will be too long to do fully. So, I adapted a nice solution off the web that uses unordered lists, and CSS and have made it available to you as well as the article from where it is linked.
Solution Attempt: http://jsfiddle.net/zFsaF/1/
<nav>
<ul>
<li>Staff
<ul>
<li>Faculty</li>
<li>Fellows<li>
</ul>
</li>
<li>Locations
<ul>
<li>Perelman Center for Advanced Medicine</li>
<li>Presbyterian Medical Center</li>
<li>Penn Medicine at Randor</li>
</ul>
</li>
<li>Patient Resources
<ul>
<li>Procedure Preps</li>
<li>Insurance Provider Numbers</li>
<li>IBD Diet</li>
</ul>
</li>
</ul>
</nav>
CSS:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Article: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
You can of course adapt this as you need it however you wish.
NOTE: If some things do not make sense, you can always refer back to the original article, use Google, or consult the very good W3Schools reference:
http://www.w3schools.com/css/css_navbar.asp
Good luck!
UPDATE:
The OP forgot to mention that the solution has to be in Javascript.
As such, the best place to begin would be to examine tutorials that have already done what is requested. Here's an excellent place to start:
http://vandelaydesign.com/blog/tools/dropdown-navigation-menus/

CSS Help - Footer for Mobile Website

I am currently working on a mobile website and I could use some help with its footer.
Here is an image of how its supposed to look:
http://i.stack.imgur.com/alH8M.jpg
It should have the following:
1) the width needs to work on different mobile devices so it cant be fixed
2) the margin to the left of home and to the right of newsletter should be equal
3) if the devices width isnt big enough for the footer to be displayed in one line, the links should be displayed in multiple "lines". What im trying to say is, there should be no horizontal scrolling
Ive been fiddling around for ages now and cant get it to work. Heres some basic code to get started:
<nav>
<ul>
<li>Unternehmen</li>
<li>Kompetenz</li>
<li>Produkte</li>
<li>Partner</li>
<li>News</li>
</ul>
</nav>
Thanks in advance to anyone who can help me!

nav { background: #016d9b; }
nav ul { text-align: center; padding: 0; }
nav ul li { display: inline-block; border-right: 1px solid white; padding: 0 10px; margin: 10px 0; }
nav ul li:last-child { border-right: none }
nav ul li a { color: white; text-decoration: none; }
ul with text alignment to the center and li displayed as inline block.
I think this should handle.

nav{width:100%; display:block;}
nav ul{padding:0px; margin:0px;}
nav ul li{ width:20%; float:left;}

try this
nav ul { list-style-type:none; margin:0; padding:0; }
nav ul li { float:left; padding-left:10px; margin-right:10px; border-left:1px solid #fff; }
nav ul li:first-child { margin-right:0 !important; }
nav ul li a { color:#fff; }

I am not sure this will help you....
But i have done some works. you can resize the window it will display in multiple "lines.
here jsfiddle: http://jsfiddle.net/thilakar/XM2qU/1/

To your curren HTML structure, you can set some CSS to achieve a replica of the provided image:
See this working Fiddle Example!
HTML
<nav>
<ul>
<li>Unternehmen</li>
<li>Kompetenz</li>
<li>Produkte</li>
<li>Partner</li>
<li>News</li>
</ul>
</nav>
CSS
body {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: blue;
text-align: center;
}
ul {
list-style-type: none;
padding: 12px 0;
width: auto;
margin: 0 auto;
display: block;
}
li {
display: inline-block;
margin: 0;
padding: 0;
}
a {
color: #FFF;
border-left: 1px solid #FFF;
text-decoration: none;
font-family: sans-serif;
padding: 0 8px;
font-size: 12px;
line-height: 17px;
}
li:first-child a {
border-left: 0 none;
}
a:hover {
text-decoration: underline;
}
Preview:
Some relevant links that can help you learn about what is being suggested:
CSS display Property
CSS Lists
CSS Padding
CSS Tutorial, Learning CSS

How do I disable hover for a link ? I'm using li:hover

I'm trying to disable the hover functionality for a menu.
I want it to be enabled only under certain conditions.
I've tried using $(".ulColor").removeClass('hover');, but that hasn't worked
The CSS code for enabling the hover is :
li:hover ul, li.over ul { display: block; }
Here is the HTML DIV inside which the menu resides -
<div id="pColorSelectorDiv" class="parentOfAll">
<ul id="colorNav" class="ulColor">
<li id="liColorNav" ><a id="colorSelected" class="firstAnchorChild">Colors</a>
<ul id="ulColorChild" class="ulColor">
<li><a id="bkgColor-1" class="bkgColor-1 anchorClass" name="colorPallete" onclick="colorPicked('1');">COLOR</a></li>
<li><a id="bkgColor-2" class="bkgColor-2 anchorClass" name="colorPallete" onclick="colorPicked('2');">COLOR</a></li>
<li><a id="bkgColor-3" class="bkgColor-3 anchorClass" name="colorPallete" onclick="colorPicked('3');">COLOR</a></li>
</ul>
</li>
</ul>
</div>
Here is the rest of the CSS code :
div[id="pColorSelectorDiv"] ul {
margin: 0;
padding: 0;
list-style: none;
width: 50px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
div[id="pColorSelectorDiv"] ul li {
position: relative;
}
.firstAnchorChild{
display: block;
text-decoration: none;
color: #777;
background: White; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
cursor: pointer;
}
li ul {
position: absolute;
left: 49px; /* Set 1px less than menu width */
top: 0;
display: none;
background: White;
}
/* Styles for Menu Items */
.anchorClass{
display: block;
text-decoration: none;
color: #777;
background: White; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
cursor: pointer;
}
.bkgColor-1 {background: #00FFFF; color: #00FFFF;}
.bkgColor-2 {background: #0000FF; color: #0000FF;}
.bkgColor-3 {background: #7FFF00; color: #7FFF00;}

I think you want
li.hover:hover ul { display: block; }
instead of
li:hover ul, li.over ul { display: block; }
Now this style will affect ul only when li is hovered and has hover class.
A simplified example.
PS You might also benefit from using 'code sample' button on edit form (the one with zeroes and ones) to format your code. Among other things, it'll preserve indentation (and thus increase readability). The key combination is ctrl+K. I've edited one of your code samples to demonstrate it.