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/
Related
I have a very simple page with the standard bootstrap nav which collapses when on small screen. Right below the nav I have a div which I do not want to show if the li has CSS class dropdown open. Is it possible to do this via CSS only or do I have to go down the jQuery/Javascript route?
.navbar-nav > li.dropdown.open {
/*How can I hide the div class="inner-details" here*/
}
If the dropdown element is not wrapped with another one, you could possibly use the adjecent sibling selector like this:
li.dropdown.open + .inner-details {
display: none;
}
Otherwise you could do tricks with negative margin and z-index, effectively sliding content from below the dropdown behind it, but really this will lead to messy layout.
There's no evil in using JavaScript. Bootstrap itself uses it for the navigation if I remember correctly.
I am creating a side menu with 4 - 5 menu items. On page load event all sub menu are hide and when user click on main menu it's sub menu will only been show. I am able to achieve most of the stuff but the only confusing part is:
When I re size my page everything looks hazy. Like text is over written on menu box.
When mouse over any main menu it should show red under line.
When I click on any sub menu it's text color should be red.
[model][fiddle]
If possible, can any one guide me or show me what I am doing wrong.
Thanks in advance.
1: Try changing the size of #master to be absolute (in pixels) instead of a percentage for smaller screen sizes, using media queries.
2: Can be done in CSS using borders, like this:
.expanded > a:hover { border-bottom: 1px solid #f00; }
3: Also done in CSS like this:
#master > li > ul a:active { color: #f00; }
I'm trying to find a javascript library (better if can be done usiny jquery) to replicate more or less the functionality of the top menubar of wordpress once you are logged. You can add images/links on the left, on the right, or both sides.
The most javascript menus libraries that I've found are not as nice as this one, some of them only add buttons/link on one side or centered ...
See the attached image.
thanks
EDIT:
Bootstrap provides this functionality out of the box. Even if you don't need the entire Bootstrap framework, it's easy to separate what you need from the rest.
For a quick and simple sticky navigation bar (with none of the more involved extras, such as drop-down menus, etc.), you can use the following CSS:
#bar {
position:fixed;
top:0;
left:0;
right:0;
height:36px;
background: black;
}
... and then add whatever you need to it, e.g.
<div id=bar>
<img class=bar-left src=logo.png />
<div class=bar-right>Login button!</div>
</div>
and the CSS:
.bar-left {
float:left;
}
.bar-right {
float:right;
}
This works well enough. As for jQuery, you could use it to dynamically add elements to the navbar with its .append() and .prepend() methods.
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.
Can someone please provide insight into how I can replicate the functionality shown in this example.
Specifically, the navigation bar (first tab) > Watches. The user can hover over the link and a full screen width dropdown is displayed and hides after either when a user clicks on a link or mouses out. I am creating a similar menu type drop-down and need this to function across all platforms and browsers, including ie7.
Appreciate the insight.
Nothing terribly fancy there, or that would require modern browsers, just using typical :hover psuedo-class to show the the menus, which are initially hidden.
There is a wrapper #navigation that sets position: relative (this allows children to be absolutely positioned relative to it). Then there is a <nav> tag inside there used to center. Then inside of that is a ul.level-1 with li's that are display: inline which are the main menu items. Then within those are the menus you are fond of, which are absolutely positioned down a bit and are 100% width.
Then the bit that displays the menu:
// level two menu hidden by default
div.level-2 {
display: none;
}
// show level-2 when hovering parent menu item
ul.level-1 li:hover div.level-2 {
display: block;
}