Developer's manual
- Manual →
- Further development →
- HTML development
HTML development
The underlying HTML
is restricted in some ways - it must be an unordered-list, all items
must be <li><a> pairs, and additional HTML
is only allowed inside <a>
or between <li> and <a>.
But within those constraints there's a lot you can do.
Adding a second navbar
The script can style any number of additional single navbars
to the same core configuration.
Additional navbars should also have the
class name of "udm", but they must
only have the class name, not the id.
Have a look at the
Two navbars demo so see this in action. The second
list has the same styles as the top navbar, because of its
"udm" class name,
but it also has its own id of "secondNavbar".
In this case the id is only used
to set a z-index on the navbar, placing
it below the level of the first, but you could also use this id
to drill further into the list and style it differently. For more
about that please see the
CSS development section.
These additional navbars can only be single navbars - they can't have submenus coming from them. But if do you want another menu generating navbar, or you want multiple navbars with completely different configurations (such as one vertical and one horizontal), you can do this using a different technique - described in the article: Getting more out of the CSS Generator.
Adding HTML
You can add any valid HTML inside the links, for example simple emphasis:
<li>
<a href="/"><strong>Company</strong> home page</a>
</li>
<li>
<a href="/products/">
<em>Products</em> and <em>Services</em>
</a>
</li>
Or image-icons:
<li>
<a href="/menu/">
<img src="/udm-resources/icon.gif"
class="icon" width="7" height="9" alt="*" />
About us
</a>
</li>
There I've added a class name to the image so I can give it some CSS - in this case a right-margin, to put space between it and the link text:
.icon {
margin-right:7px;
}
You can also put HTML between the list-items and links, and one use for this it to add headings into the navigation bar. This should improve usability for people using a screenreader or other serial-browser, by allowing them to skip from branch to branch using their "headings-reading mode" or equivalent. For more about this please see: Navbar headings.
Android Depok
coba di sini gan http://t.co/Crdz7kOp RT @officiallyjun: @depokdroid min minta link game HD dongs..for samsung wonder :))
22 hours ago
Marlene Boatwright
Watch live tv on ps3. Software Downloads.: Online TV Live lets you watch 3645+ free Internet TV, on demand video... http://t.co/lNuJ1rAz
1 day ago
Robert P Reibold
Autocad drawing studio. Software Downloads.: AutoCAD to PDF Converter is a batch converter that allows you to co... http://t.co/emqHDpA2
2 days ago
Tony N
FYI... Software testing vga Software Downloads http://t.co/Fh28NO40
2 days ago
Jeraldine Nadler
Robot email sound Software Downloads http://t.co/bTRvdf7s @EmailResponder
3 days ago
NFL Football News
#NFL Powered By PhpBB Nfl Football Radio usage on homepages: Powered By PhpBB Nfl Football Radio is related to: ... http://t.co/SsK2G9wt
3 days ago
KwikTIK
Powered By PhpBB Nfl Football Radio usage on homepages: Powered By PhpBB Nfl Football Radio is related to: ... C... http://t.co/NuFNf7TQ
3 days ago
Nfl Seat
Powered By PhpBB Nfl Football Radio usage on homepages: Powered By PhpBB Nfl Football Radio is related to: ... C... http://t.co/maZHNTA9
3 days ago
