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>?
Related
I am new in web page design. I made a web site in html and css. I did not use wordpress or any kind of canned web designing site.
This kind of code does not work in mobiles. This is part the code in my website.
<nav>
<ul>
<li> Home </li>
<li> Flowers </li>
</ul>
</nav>
I researched, and the code that I see is this:
<li>Contact</li>
Can somebody tell me what "#" means?
What can I do to make my links suitable for tablets and mobiles?
Thank you in advance to anybody who can help me.
Try
<nav>
<ul>
<li> Home </li>
<li> Flowers </li>
</ul>
</nav>
also add css
a {display:block;}
At the moment with the code I have, the dropdown menu works and shows the other options, however when you click the actual "Trading" text, which is the main text for the menu, nothing happens, it doesn't take you towards the intended page.
I'm using the latest version of Bootstrap
<li class="dropdown">
Trading <span class="caret"></span>
<div class="dropdown-menu">
<ul>
<li>Product Group A</li>
<li>Product Group B</li>
<li>Product Group C</li>
</ul>
</div>
</li>
The above code is part of a navbar.
What I have pictured in my head is this: When you click on the menu button "Trading"
Trading <span class="caret"></span>
I need it to take you the the page that the href is pointing it to "trading.html"
I also want it so that when you hover over "Trading" you get a dropdown menu that have the three options provided
<div class="dropdown-menu">
<ul>
<li>Product Group A</li>
<li>Product Group B</li>
<li>Product Group C</li>
</ul>
</div>
I plan to create the "Trading" page with three sections that each have their own anchor points, one for each product groups in the dropdown menu.
When you click on "Trading", I want it to take you to the top of the page. However, say you click on "Product Group B", I want it to take you to the "Trading" page, but to take you to the anchor point on the page that is linked to that section.
Hopefully, I have explained it well enough for professional to understand and may be provide me with some help.
Thank you
What about using a split button?
http://codepen.io/Sixl/pen/VPJawG?editors=1111
For some reason the "main button" gets styled differently when using <a class="btn"> instead of <button class="btn"> inside the group. So you would need to correct the styles to use it with a normal anchor tag. But shouldn't be too much trouble
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
I'm trying to pull off the following Top Bar with Zurb Foundation.
(I'm aware of how to do this with plain HTML...trying to figure out the correct way to do it using Foundation, though.)
So you've got the title-area name on the left (which works fine), and on the right the "Hi, Joe!" is just plain text and then the "Change Settings" and "Log out" are each links (which doesn't work).
Here's what's happening when I build that out...
And here's the code I'm using...
<nav class="top-bar">
<ul class="title-area">
<li class="name"><h1>Acme Company</h1></li>
<li class="toggle-topbar"></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>Hi, Joe!</li>
<li>
Change Settings | Log out
</li>
</ul>
</section>
</nav>
So how can I get Foundation to work with my original design example above?
Foundation uses the a tag to style it. You're better off putting them in two separate li tags.
e.g.
<li><a href='#'>Change Settings</a></li>
<li class='divider'></li> <!-- built into foundation -->
<li><a href='#'>Log out</a></li>
Your Hi, Joe! should go in a blank a tag also.
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.