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; }
Related
I am currently trying to customise OTRS 5 and have got most things how I want them by creating a custom skin and overriding the default CSS. However, all of the dropdown menus are orange on hover but this seems to be set somewhere in the Javascript files and not in raw CSS. Does anyone know which files I need to change to override this background color to another?
Thanks
It's still pure CSS here!
You'd want to use these CSS selectors in your skin, the first one is the hover color and the second one is the class for the currently active navigation button.
#Navigation > li:hover {
border-color: blue;
}
#Navigation > .Selected {
border-color: green;
}
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.
My leader told me select option could not be fully custom-tailored. Therefore, I have to use ul li to make the following css style. http://jsfiddle.net/C5mTf/59/
Sorry, the following is partial css had to show per stackoverflow requirement
#menu ul:hover .item:last-child{
border-bottom: 1px solid #cbc5cd;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
The following are requirements:
1. at initial stage, the dropdown menu only show first item with rounded corners.
2. if moving mouse over menu, it will display all items with the whole box rounded corner.
3. After clicking any item or leaving the menu, the dropdown menu will hide all items except selected one
Is there a way to use select and option tags to build the same css appearance?
For cross browser rendering answer is no. There are some jquery plugins that do a lot of dom manipulation for selects, but your menu looks fine. You will end up wasting more time on trying to figure out how to make it look that way.
I am using a WordPress plugin which creates the following output:
<li>
<img src="/media/image-thumbnail.png"/>
Post Title
</li>
I applied an a:hover style for both the image and the text. But of course they are triggered separate of each other, as there are two links being generated. I would like to have them triggered both on hover (in my case: image border color changes and text color changes - no matter which of the two elements are being hovered).
Of course I could fiddle into the plugin source and change how it is built there, but due to update-ability I thought it would be cleaner to change it with a few lines of jQuery. Unfortunately I don't know how to approach this and would be thankful for ideas!
Add the hover on the li
FIDDLE
li:hover img
{
border: 2px solid green;
}
li:hover a
{
color: orange;
}
With Jquery you could use the hover function.
Something like this
$('.wp_rp_thumbnail, .wp_rp_title').hover(function(){
$('.wp_rp_thumbnail img').css({"border":"1px solid #fff"});
$('.wp_rp_title').css({"color":"#fff"});
});
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/