I have a small question about a certain css navigation technique where an end list item is shoved all the way to the left or right. Look at the light blue navigation above to see an example of what I am talking about. The light blue navigation has 1 list item which is shoved all the way to the right. How do I achieve this effect?
There are two navigation menus wrapped in their own div. One is floated left the other "Ask Question" is floated to the right. Both are within a div with an ID hmenus that has a width set. You can view the elements and styles using Chrome developer tool, firebug or just view the source and follow the CSS styles.
Related
Introduction to clearify the task
I have a Navbar on the left side of my page. It has two levels for Items. When it's displayed in a small device, only the icons of the first level are shown. If you hover over it a dropdown of sub-items wil be shown on the right side of the bar. So far so good.
When the user uses a normal device the first-level-items should be displayed as dropdown-headers and the sub-items should expand under their parent-items on click. So I planned to set the sub-items-container under the main-items with height: 0px; and exband it with javascript-onclick and a css transition.
But as you can see the sub-items are hovering over the main item.
Question
How can i ensure that the subitemlist is between the main-items and not over it?
Additionally the solution shouldn't destroy the responsivness.
Note: I really want to make my own navbar, so using Bootstrap is not an option. Also i'm sorry if the code is not the best, it's the first try.
Code
I have put the whole thing in a jsfiddle
you cant put it in sidebaritem you have to put it below it
I'm trying to fix a problem I have with one of my custom theme I am working on.
If you browse to the site http://www.worclan.com/ you will see I have made a drop down menu. When you hover over a menu item or you are on the current page the item turns yellow.
The problem is I can't get the bottom of the yellow to touch the bottom of the containing menu box. There appears to be a added padding or margin which I can't track down and remove.
Any help or suggestions?
For future reference, you need to post the code in your question in your question.
If you set #navarea to line-height:0, it will work.
I know that this is not my "personal helpdesk", but am looking for a simple solution to implement a navbar where navbar items dissapear and eventually turns into a dropdown (or left side navbar) as the browser is resized horizontally like http://mashable.com.
I am currently using http://www.bublinastudio.com/flattybs3/ which is built on top of Bootstrap 3. I have been looking for hours but all I can find is "how to put dropdowns in your navigation bar". Nobody explains how you can show/hide navbar items based on browser width and how to prioritise your items, indicating which should disappear first.
If any of you could please just redirect me to some useful sites with more information about this I would be most grateful!
Bootstrap 4 (updated 2019)
Here is a newer option for Bootstrap 4.1. This will collapse the overflowing extra navbar items into a right side dropdown list. It progressively moves the navbar items to the dropdown.
https://www.codeply.com/go/IETSah3bFG
Bootstrap 3 (original answer)
If I understand your question, you're looking to have the navbar links collapse to the "More" dropdown on the right when there is not enough width. This would require customization to the CSS, and some jQuery to monitor the width of the navbar and collapse the links overflowing accordingly...
Here is a working example: http://bootply.com/128897
You could look up information about both Media Queries and also :nth-child() selector. The should help you along with what you are hoping to do!
nth-child()
http://css-tricks.com/how-nth-child-works/
http://api.jquery.com/nth-child-selector/
Media Queries
http://css-tricks.com/css-media-queries/
I have some list items and I want the corresponding drop down menu to align to the left, for some elements, and some should remain. (See link.) When you hover over the "more", "opinion", and "lifestyle" link, it aligns to the right and out of the page causing lengthy stuff. I want just those 3 menu lists to align to the left when you hover, while the others not mentioned to remain. What can I do to achieve this?
After looking through your html I suggest you look for the classes leaf *first leaf* and last leaf and add another class in your CSS that mimics these except float:right. then apply this to the menus you want to float right.
If this makes the elements go to far to the right maybe try
position:inherit;
left:-Xpx;
And replace X with the amount of pixels you want it to go left.
On this site
Luck
I am dealing with some web development issues and want to know how I can achieve this specific menu layout in HTML, CSS, Javascript.
When hovering over "Design" or "Hintergründe" the main area changes and shows the content. My problem is the border, the outline that changes when the active menu point is changed. So I would take 2 div containers for "Design" and "Hintergründe" with borders at left, top and right (no bottom). And the main area has to be a div with borders itself. How can I achieve the mising party of the border where menu-choice and main area blend one into another?
By the way: Are those costum (thin) scrollbars possible in HTML for div containers?
Thx in advance
All the best
Michael
The tab that you click on has the same background colour as the content area, and it has margin-bottom:-1px and a z-index to place it over the content. This makes the background cover up the content area's border, producing the effect you're looking for.
MichiMichbeck gave a good answer regarding the tabs.
For the thin scrollbar try one of the many javascript/jquery plugins that are available.
One example is: http://jscrollpane.kelvinluck.com/
You can also change the scrollbar for webkit browser in CSS: http://css-tricks.com/custom-scrollbars-in-webkit/. But the javasript solution would probably be preferred.