How to keep CSS/HTML dropdown from showing partially off-page? - javascript

I have a pure css/html dropdown menu, the code for which I pretty much stole from csswizardry here. It works like a charm; the only problem is that, if that menu item is on the far right side of the page, the dropdown items are half-off the page.
I'm working on a javascript solution; is there a way to fix this problem using just CSS?
EDIT: I'm looking for the dropdown content to move to the left so that the dropdown items are fully visible.

Looking at the code you based it on, instead of
#nav li:hover ul { left:0; }
...you'd want:
#nav li:hover ul { left:auto; right:0; }
Looks like you may need to adjust the right margin of #nav li if you're using the same CSS as csswizardry.

Related

show only one li item when sliding list items from left to right

I am trying to make a text slider and I want to show only one li item per slide. The data in li items is being fetched from DB and inserted to DOM by JS. The problem right now is that all of the li items are showing while sliding, current elem shows at top. How I can make sure that only one li item shows per slide with css?
I tried to make the li items display: inline and float but it did not help.
#slider ul li{display: inline}
Here is the website where I am testing. Please help me understand how I can do this or what I am doing wrong here.
If you're talking about the text in the main body that rotates, you can hide all but the first li with
#slider li:not(:first-child) {
display: none;
}

Making drop-down navigation menus not affect other element positioning

was wondering if there was a better way to handle what I'm trying to do. I've made a basic drop-down navigation menu where the menu bars are li and class elements with a set height with the overflow property set to hidden, which then animate in height to reveal the 'drop down' portion of the animation when hovered over with the mouse. I found however that other web page elements (like main content) would then be pushed around and re-positioned when the menu elements collided with them. I stop-gap fixed this by making the affected elements absolute positioning, but I can't help but feel there's a better, more effective way of fixing this.
Is there any way to make it so the navigation elements for lack of better word get 'ignored' positioning-wise?
Here it is in practice - the first 'article' area has been made to be absolute positioned - http://gamearticlesite.bbdesigns.ca/index.html
the code:
Jquery
//When mouse rolls over
$("li.extend").mouseover(function(){
$(this).stop().animate({height:'250px'},{queue:false, duration:500})
});
//When mouse is removed
$("li.extend").mouseout(function(){
$(this).stop().animate({height:'35px'},{queue:false, duration:500})
});
CSS:
#headerNav ul{
list-style-type: none;
color:#efefef;
margin:0;
margin-left:75px;
padding:0;
}
#headerNav ul li{
width:125px;
height:35px;
float:left;
color:#efefef;
text-align:center;
margin-left:10px;
margin-right:10px;
overflow:hidden;
}
The correct answer was that yes, Absolute Positioning is the way to solve this, but to use it on the navigation menu. In the example posted, on the ul element, not the individual li elements that would animate as that could cause issues with positioning of the li elements within the ul element.
Setting the position to position:absolute for the ul and giving a z-index property to make sure it's 'on top' of the elements it clashes with made everything work out just fine.
Use
float:left
or
position:absolute

href not loading link every time part of the li is clicked. Using javascript to make the whole li clickable

http://hemakessites.com
I'd like to click the About button to go to the About page. I'm using Javascript and JQuery to handle the behavior (make the whole li clickable). For some reason, clicking about in different areas of the li doesn't always load the page.
I'm open to not using jQuery if there's a better solution.
The "contact information" and "hobby projects" li don't have an href, so the links don't work. If you go to the About page, the menu works based on CSS without the javascript trying to make the whole li clickable. So there is no javascript on the about.html page, and you can see the menu problem without any javascript.
Thanks for your help!
index.html
<div class="navcontainer">
<ul><li>Link Title</
li><li>Second_Link Title</ <!-- fixes extra space with </li><li> -->
li></ul>
</div>
style.css
#nav li
{
display: inline-block;
List-Style-Type: None;
float:left;
text-align:Center;
width: 153px;
height:46px;
font-size: 80%;
border-Bottom: 1px solid #666666;
}
#nav li #about
{
z-index: 10000;
position: relative;
top: 18px;
text-decoration: underline;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
}
just add the following in your CSS:
#nav li.about a{
z-index:10000; }
and it will work
Your issue is not the javascript, but the CSS. You have a hover attribute that enlarges the <li>. When you click, the active attribute causes it to shrink, making the element smaller than it previously was. If you click in the upper corners of the enlarged element, it won't load because the element is now below the clickable area. If you click in the middle towards the bottom, it will.
Ultimately, for something like this, you might be better off using jQuery UI to manage your tabs or use Twitter Bootstrap. Out of the box it works, and you don't have to worry about CSS issues, plus they already look nice so no extra styling.
If you want to stick with you already have going, you may just want to ditch the fancy CSS. Get rid of the :active class and it should work okay I think.
The problem you have right now is that the li is bigger then the a. Clicking on the li, but outside the a will not make the link work, as you already found out.
In stead of applying all your styles and effects to the li element, you should apply them to the a element directly and set it to display as a block. This way the li will take the same size as the a, and whereever you click on the hovered item, your href will work just fine. Bigger links is always a good idea, definitly with the amount of tablets and other toutchscreen devices rizing every day.
Note that it will not be a straight copy / paste of your code, especially when it comes to floats and positioning, but it should not be to hard to achieve what you are after by applying the styles directly to the a element. If you have difficulty converting your code, feel free to set up a working example on jsfiddle and we will be happy to help out where possible.
This solution does not require any js what so ever. Using js for your main navigation is always a bad idea, as it will make it hard, if not impossible, to navigate your site for people with js disabled. Not exactly what i would call gracefull degrading...

Script that does hide/show on DIV and displays selected Block

I have a page which has 6 block menu choices and when you click one (e.g. '4') it shows block 4 content in a DIV opposite and will show the block as selected with an arrow.
When you click another block (e.g. '1') it will unselect 4 and then select 1 displaying block 1's content in the DIV.
I'm looking for the best script to do this in JS or jQuery. I'm guessing I could build the blocks as a listed menu and when selected, the CSS will display an image with the arrow.
Thanks
Update: Here's a mockup of what it will look like:
Another option instead of building yourself or jQueryUI tabs, I would prefer jQuery Tools Tabs:
http://flowplayer.org/tools/tabs/
They can be easily customized to your situation with some CSS adjustments:
http://flowplayer.org/tools/demos/tabs/skins.html
(just use some floats and width changes here to get what you're asking for, where XXX+YYY == width of wrapper)
#panes { width:XXXpx; float:right; }
#nav { width:YYYpx; }
#nav ul { width:YYYpx; float:left; margin:0; padding:0; }
#nav ul li { width:YYYpx; display:block; margin:0; padding:0; } /* no float! */
This is really well implemented in jQuery UI, which has a "tabs" feature.
You could use jQuery UI Tabs and opt to put the selectable options either along the top or along the side and it would behave just like you say you need.
http://jqueryui.com/
Demo of tabs is here...
http://jqueryui.com/demos/tabs/

Jquery easeOutBounce direction?

I am attempting to use a Jquery menu, that makes use of the 'easeOutBounce' easing method. It is working fine but, I cannot figure out how to change the direction that the menu is bouncing out from. It currently expands to the right and bounces. My menu will be right-align and I want it to expand to the left.
This is the example I'm using: http://jcargoo.110mb.com/rightmenu/
Is this what you are trying to achieve? http://demo.raleighbuckner.com/so/1338381/
If so, all I did (other than removing the extra examples) is to change this CSS:
#sliding-navigation1 li {
text-align: right;
}
to this:
#sliding-navigation1 li {
text-align: right;
float:right;
clear:both;
}

Categories

Resources