I am working on a drop down menu. Trouble that I am facing is that, I have a 3 level of <ul>, and in second level when height of a <li> increases because it was accommodating another <ul> then all other <li> of second level do not wrap around it.
You can visualize the situation in this Fiddle
when you hover your mouse over Technology then you would be able to see that size of Web Design <li> is greater because of another <ul> that it is accommodating, because of that Typography and Front end has dropped below. Is there any way to keep them wrapping around?
Html structure is like this:
<nav id="nav" role="navigation">
<ul class="clearfix">
<li> <span>Technology</span>
<ul>
<li>Hot news</li>
<li>Sad news</li>
<li>Normal news</li>
<li>Web Design
<ul>
<li>Super power
</li>
<li>Aim Gain
</li>
<li>Acheivers
</li>
<li>Lackers</li>
</ul>
</li>
<li>Typography
</li>
<li>Front-End
</li>
</ul>
</li>
<li>Personal Stuff
</li>
</ul>
EDIT: Attaching few screenshots
This image shows present problem, see position of Typography and Front-end
Following image shows what I am trying to achieve, see position of Typography and Front-end
Here you go: JSFiddle
UPD: JSFiddle in acc to screenshot (Need to update CSS rules)
UPD: JSFiddle example based on classes
I've just removed the margin-left:20px; on #nav li ul li > ul
Tested on Safari 6.1 (Mac OS X 10.9) |
UPD: additionally tested on Chrome (30) & FF (23.0.1) under Mac OS X 10.9
Related
So I'm learning web development on my own since I'm a CS major and it appears that my school doesn't have an option for that in cs (IT only). Right now I've been using youtube, Microsoft virtual academy, codecademy(not pro), and khan academy. Kind of besides the point but my question is I have pills in bootstrap, I want to have a list under each pill that's only accessable by clicking on that pill. The way I have it setup is that the pill is a shortcut to the list that is further down the page, is there a way for me to hide the lists so that they're only specific to the active pill without me having add each lists down the page, using html,css, or bootstrap? This is what I've been working with, I haven't moved on to js or php or any scripting, I do know python but I don't know how to implement scripts in html yet.
code below
<ul class = "nav nav-pills">
<li class ="active"> Engineering </li>
<li> Medical </li>
<li> Education </li>
<li> Jobs for students </li>
</div>
</div>
<div class ="eng-company-list">
<div class = "container">
<ul id="engineering-positions">
<li> Google </li>
<li> Amazon </li>
<li> Facebook </li>
<li> Twitter </li>
<li> Pandora </li>
<li> Dropbox </li>
<li> Pinterest </li>
<li> Khan Academy </li>
<li> Zynga </li>
<li> EA </li>
<li> Sony </li>
<li> Intel </li>
</ul>
</div>
</div>
<div class ="edu-list">
<div class ="container">
<ul id = "edu-positions">
<li> newitem </li>
<li> newitem </li>
<li> newitem </li>
<li> newitem </li>
<li> newitem </li>
<li> newitem </li>
</div>
</div>
like right now I click on the Engineering pill and it displays the eng-position list AND the edu-positions list, what I want to do is hide the edu-positions list from engineering and subsequently Jobs for students, Medical, etc.
You can use the display: none; css property: value pair on a default element and psuedo classes.
For example, name each container uniquely. (e.g. engineering-container, edu-container) and set css property "display" to "none" on both. Use relative positioning in your css and define the positions in which the container will reside. You can also use x-index values to place the container behind your main container.
Then use the :hover pseudo class on your primary navbar and the hidden containers to make it show. Set the :hover display values to block. So when you hover over the navbar tag "engineering", the list will also expand and show for the list you've associated with the engineering navbar link.
Sorry for not giving you a step-by-step details, but it can be done with just css. It would be easier with jQuery. But as the remark made in an earlier comment, you should learn css layout first. It will make you a better developer and you will need to know it pretty well if you're going to become a developer.
So, since you don't know js, I highly recommend you look into CSS psuedo classes. With it, you can get a navigation list to expand and retract. You will have to just make sure that the :hover includes your links else it will retract once you move off the div because it no longer the active element.
Try this:
<header id="navigation" class="nav nav-pills">
<ul class="menu-content" style="display: none;">
<li class="menu-link active">Engineering</li>
<li class="menu-link">Medical</li>
</ul>
</header>
And at end of body tag paste this:
<script type="text/javascript">
function showhide() {
var nav = document.getElementbyId('navigation');
if(nav.style.display == 'none') {
nav.style.display = 'block';
} else {
nav.style.display = 'none';
}
}
</script>
Or I found 100% open-source example of navigation which you want by Bootstrap on github https://github.com/BlackrockDigital/startbootstrap-logo-nav.
I have nested ul tags under my standard ul - li tags, and apparently IE is having trouble displaying this properly. Ex:
<ul>
<li>things</li>
<li>more
<ul>
<li>more1</li>
</ul>
</li>
</ul>
Everything looks fine in Firefox and Chrome, but I just noticed that it's not working in IE 7, 8 or 9. You can see what I mean here: http://bovinsnbcattle.ca/
I would gladly appreciate any help.
Thanks in advance,
Bob
I had an extra ending li tag in there..., funny how I always figure it out after posting, but scratch my head for hours before doing so :/
It is working fine in IE versio 10
Edited After code shown by you
You can not use ul tag in li tag so close li tag
or u can use it as
<ul>
<li>
<li>
<ul>
<li>
<li>
</ul>
</li>
</ul>
Hope it wil work for you
I am editing horizontal navigation bar and need to add description text before the links. My problem that all the text displays after links in the browser. How can I modify css or code to change the location of the text in nav bar? 'DIRECTORIES:' and 'SEARCH:' That I need to display in the browser just before the links, not after
<div id="navcontainer">
<ul id="navlist">
<li id="active">Home</li>
<li>SEARCH: Product Technologies</li>
<li>Trials & Registries</li>
<li> DIRECTORIES: PIs</li>
<li>PI Study Sites</li>
<li>Products
<li>Companies/Sponsors</li>
<li>MIB Custom Alerts</li>
</ul>
Maybe I'm misunderstanding the question, but isn't it as easy as going from this:
<li>SEARCH: Product Technologies</li>
to
<li>label goes hereSEARCH: Product Technologies</li>
Edit: In regards to your comment, why not: <li>Search</li>?
I have a working dropdown menu on my site, but it doesn't work at all on iPhone and iPad.
Is there a manageable way to force iPhone/iPad to use their native menu selectors?
http://jsfiddle.net/craigzilla/6nZ5Q/
HTML:
<div class="dropdown"> <span class="dropdown-toggle" tabindex="0"></span>
<div class="dropdown-text" id="dropdown_colours">Colours</div>
<ul class="dropdown-content" id="dropdown_colours">
<li>Black
</li>
<li>Grey
</li>
<li>Red
</li>
<li>Blue
</li>
<li>Green
</li>
<li>Purple
</li>
</ul>
</div>
I was thinking to the CSS property -webkit-appearance, but there is no value which could force the appearance to a select box AFAIK (if there were one, how could webkit know that it should treat the li as option?)
You have to use a select tag instead of an unordered list to make iOS' Webkit changing automatically its appearance to a native one.
You could detect when the user is using a mobile browser, and load your menu dynamically.
You could either find try to reproduce the native select box with CSS too, if you don't want to change your HTML markup...
See Apple's documentation for reference.
I need to have the same hover effect to be applied on the current state for the main menu item (sub items already have the current state)
<ul id="left-menu"><li><a href="#">
<h3>Improve Your Free Web Page <span style="float:right">▼</span></h3>
</a>
<ul>
<li class="current">Upload Your Picture(s)</li>
<li>Upload Your Video(s)</li>
<li>Upload Your Logo</li>
<li>Upload Your Logotype</li>
<li>Update Your Tagline</li>
<li>Describe Your Business</li>
<li>Add Offer(s)</li>
</ul>
Jsfiddle
Usually with submenu's people create a list in a list. If you add the "current" class to the outer list, you can style it with css properly.