I am creating a small project on ASP.NET. I want a simple drop down menu. Most of the solutions on web use jquery. Is there any simpler way or should I learn jquery ?
One more thing. The menu should work on IE.
Some of the cleanest drop down implementations I have seen are based on semantic HTML (unordered lists, nav element(s), etc.) and the CSS :hover pseudo class. Semantic structures degrade nicely when script is not available and are interpreted well when consumed by devices like screen readers.
Older versions of IE which do not support the :hover pseudo class can be accommodated with a snippet of script (no jQuery required).
Suckerfish/Son of Suckerfish is a good example of this technique.
Code/Description
Examples
Example
Here is the simplest implementation I could create which works in IE7+, Chrome, FF, etc. No script required.
Complete sample: http://jsfiddle.net/BejB9/4/
HTML
I'd wrap this in a nav tag in a finished document
<ul class="nav">
<li>This item has a dropdown
<ul>
<li>Sub item 1</li>
<li>Sub item 2</li>
</ul>
</li>
<li>Item</li>
<li>So does this item
<ul>
<li>Sub item 1</li>
<li>Sub item 2</li>
</ul>
</li>
</ul>
CSS
UL.nav > LI {
list-style: none;
float: left;
border: 1px solid red;
position: relative;
height: 24px; /* height included for IE 7 */
}
UL.nav UL{
left: -10000px;
position: absolute;
}
UL.nav > LI:hover UL{
left: 0;
top: 24px; /* IE7 has problems without this */
}
Just Google like "CSS menu", you can pretty much find everything you need with just copy/paste once you find a menu you like. Learn a little CSS and you can then modify it to your liking.
See: 100 Great CSS Menu Tutorials
See: CSS Menu Maker
There is not really a need to learn jQuery in order to use it, or its plugins.
You can google for "jquery drop-down menu" and you will find hundreds of sites with ready-made code and / or tutorials.
example: http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
All you will have to do later is construct your menu usually with a <ul><li> structure, and call the right selector.
Other option you will have is use a CSS drop-down menu - just google for it like I wrote for jQuery.
Related
The navigation bar (can be viewed here) has become misaligned in Google Chrome (latest version) without any change to the coding.
The large white space present between the two rows did not used to exist, nor did the further misalignment of the four far right links.
I am only of aware of this issue in Chrome - it displays correctly in Safari and Firefox.
Code:
A code snippet for the navigation bar in the header.php is below:
<center>
<div class="navholder">
<div class="navigate">
<ul class="navigate">
<li class="navigate">Home</li>
<li class="navigate">Bus Routes</li>
<li class="navigate">Maps & plans</li>
<li class="navigate">News</li>
<li class="navigate">Enthusiasts</li>
<li class="navigate">MyRoute</li>
<li class="navigate">Live updates</li>
<li class="navigate">Tickets</li>
</ul>
</div></div>
<div class="navigateopposite">
<ul class="navigateopposite">
<li class="navigateopposite">Free travel</li>
<li class="navigateopposite">Mobile</li>
<li class="navigateopposite">Operators</li>
<li class="navigateopposite">Using the bus</li>
<li class="navigateopposite">TBR Team</li>
<li class="navigateopposite">Contact</li>
<li class="navigateopposite">Advertising</li>
<li class="navigateopposite">About</li>
</ul>
</div></div>
</center>
CSS:
The related CSS is also here:
/*Navigation bar*/
.navigate ul{float:left;width:1050px;margin-top:1px;text-align:center;}
.navigate ul li{display:inline;}
.navigate ul li a{width:127px;background:url(../images/navbar.gif)center center no-repeat;color: #000;text-decoration:none;float:left;text-align:center;line-height:50px;font-size:20px;vertical-align:top;margin: 0 1px 0 0;}
.navigate ul li a:hover{color: #fff;}
.navigate ul li a:active{color:#FFF;}
.navigateopposite ul{float:left;width:1050px;margin-top:1px;}
.navigateopposite ul li{display:inline;}
.navigateopposite ul li a{width:127px;background:url(../images/navbaropposite.gif)center center no-repeat;color: #000;text-decoration:none;float:left;text-align:center;line-height:50px;font-size:20px;vertical-align:top;margin: 0 1px 0 0;}
.navigateopposite ul li a:hover{color: #fff;}
.navigateopposite ul li a:active{color:#FFF;}
Question:
What would be causing this strange misalignment?
Try adding this to your CSS
li.navigate, li.navigateopposite {
float: left;
margin: 0;
}
I added this through Chrome's developer tools and it seemed to remedy the problem.
This might fix it but seriously... as j08691 and David Thomas pointed out... that's some pretty crazy HTML you've got going on there. With nothing but good intentions, I hope you don't mind if I make a few comments?
You've got multiple <head>s in your document - you can only have one.
You're using <div> purely for layout purposes - if you need to add spaces in the layout you should be using pure CSS... HTML, as the name describes, is for markup only - not style information. By my reckoning you could lose at least half of that markup. As a generalisation, the more markup you have, the more difficulties you're going to get into like stuff apparently breaking randomly.
I can understand not wanting to support IE7 at a push, but all versions of IE?? ("Something not working? You're using Internet Explorer"). I know IE can be pretty hateful but you can't throw the book at 10% of all of your website visitors.
I hope this helps set you in the right direction.
I'm designing Wordpress themes, the only and ever problem I have is dropdown menus.
styling those "ul" and "li" selectors with "display" and... properties.
Even reading tutorials and looking at other websites's CSS (Firebug), I still can't create one!
Is there any particular procedure or good source I can learn it?
Suppose I want to design a one-level dropdown menu.
Thanks
Mahdi,
Creating a cross-browser compatible dropdown menu is quite simple as long as you don't over-complicate it and have a decent understanding element types and the positioning model in CSS. There are some standard examples that can make it quite easy for you as well. I will try and provide as simple an answer as possible for you to understand (as my brain overcomplicated it for a LOOOONG time until I did a little research).
Your Top-Level Menu
It is good practice to have all of your menus including submenus be a ul element. There are a couple of reasons for this.
It naturally has most of the style that you need.
A menu is a list of options anyway, so its not a stretch to make it a list.
It helps disabled individuals
It allows for nesting.
The problem with ul elements is they have those nasty bullets. Additionally, the li children don't naturally flow together. They all appear on separate lines. So, we have two options to fix the li. We can float them, but that can get quite awkward. I don't recommend it. Or we can change its type. Well, we're containing another block in it, so an inline-block is kinda perfect for this.
<!-- the HTML for the menu -->
<ul class="menu">
<li class="submenu">link</li>
<li class="submenu">link</li>
<li class="submenu">link</li>
</ul>
/* The CSS for the menu */
ul.menu {
list-style-type:none; /* Gets rid of the bullets. */
}
li.submenu {
display:inline-block; /* Makes the listitems appear on the same row. */
}
** Your Sub-menus**
Now, nested ul elements must be in a list item. Browsers will always interpret it correctly if you place your dropdown ul in a li itself. Now, we don't have to declare anything funny. Just name your new ul the same as your original menu, like so:
<!-- Your new HTML -->
<ul class="menu">
<li class="submenu">link
<ul class="menu">
<li>link
<li>link
<li>link
</ul>
</li>
<li class="submenu">link
<ul class="menu">
<li>link
<li>link
<li>link
</ul>
</li>
<li class="submenu">link
<ul class="menu">
<li>link
<li>link
<li>link
</ul>
</li>
</ul>
/* Your new CSS. Notice nothing has changed. */
ul.menu {
list-style-type:none; /* Gets rid of the bullets. */
}
ul.menu li {
display:inline-block; /* Makes the listitems appear on the same row. */
}
The next step. Getting the drop down to appear.
Now, we have our cross-browser structure, we just need to tweak a couple of things. We need to first make the menu appear and disappear. Since we only want this to happen to a submenu, we get more specific:
/* Add this to your CSS. */
li.submenu ul.menu {
display:none; /* Makes the submenu disappear. */
}
li.submenu:hover ul.menu {
display:block; /* Makes the submenu appear. */
}
Now, if you take a look, your menu appears and disappears appropriately. No styling, just lists for you. Works the same way in all of the browsers... oh wait! IE is making it bigger. Well, that's a simple issue. You see, IE interprets padding differently than the others. Lets make it a non-issue:
/* Add this to your CSS. */
menu * {
padding:0; /* Width problem solved. */
}
Now, one other issue... your submenus are horizontal. The reason is because we told it is should be in our original.
ul.menu li {
display:inline-block; /* Makes the listitems appear on the same row. */
}
We can fix this my being more specific.
/* Add this to your CSS. */
li.submenu ul.menu li {
display:block;
}
Now it is vertical! Test this in any major browser and you will see those are the only components necessary for a cross-browser dropdown menu.
Final HTML for Menu
<ul class="menu">
<li class="submenu">link
<ul class="menu">
<li>link
<li>link
<li>link
</ul>
</li>
<li class="submenu">link
<ul class="menu">
<li>link
<li>link
<li>link
</ul>
</li>
<li class="submenu">link
<ul class="menu">
<li>link
<li>link
<li>link
</ul>
</li>
</ul>
Final CSS for Menu
menu * {
padding:0; /* Width problem solved. */
}
ul.menu {
list-style-type:none; /* Gets rid of the bullets. */
}
li.submenu {
display:inline-block; /* Makes the listitems appear on the same row. */
}
li.submenu ul.menu {
display:none; /* Makes the submenu disappear. */
}
li.submenu:hover ul.menu {
display:block; /* Makes the submenu appear. */
}
li.submenu ul.menu li {
display:block;
}
This solution doesn't require funny positioning or width declarations.
Hope this helps!
FuzzicalLogic
One good source for me was http://lwis.net/free-css-drop-down-menu/
You can see the basic structure used.
If you want to just create a simple one-level menu. It's kind of explained above by Fuzzical Logic but you can use the pseudo-class :hover to show and hide the dropdown menu. It's explained in this article in simple terms.
Hope it helps
Story short I have widgets sidebar. I style it like this:
.widgets ul {padding: 10px}
Now one of the ULs inside widgets I want to avoid padding from it, but keeping all other ULs use default padding of 10px.
So i tried to give class to children UL which I want no padding on like this
.tabs {padding:0}
I tried ul.tabs, and .widgets ul.tabs nothing seems to take effect. It still receives padding 10px. And I can't afford to do custom padding for every UL inside the widgets.
Can you please tell me what I am missing ?
The html is pretty basic.
<ul class="widgets">
<li><h2>Widget title 1</h2>
<ul>
....my widget content
</ul>
</li>
<li><h2>Custom widget 1</h2>
<ul class="tabs">
...this one I want to have padding:0..
</ul>
</li>
</ul>
Thats the html basic framework. I set padding:10px to any ul in PARENT widgets ul but I want specific custom widget to have its own custom styles, I can't do it :( in this case ul class=tabs
The "C" in CSS stands for "cascading". Learn about the cascade and you will see that your second rule is less specific than the first, so the first wins.
In general, the rule with more class selectors wins, and #ids trump most stuff.
To answer your question, adding specificity will do it.
.widgets ul.tabs {padding:0}
(assuming the .tabs is indeed on the ul like you said.)
A more specific CSS selector should override a less specific one. So your experiment with using .widgets ul.tabs should work. Is it possible that when you tested that, your browser had cached an earlier version, or some such?
Here's my sample HTML page. First I tried it the way you had it; it didn't work (as it shouldn't). Then I changed it to what is here, and it worked (in Firefox).
<html>
<style>
.widgets ul {padding: 10px}
.widgets ul.tabs {padding:0}
</style>
<ul class="widgets">
<li><h2>Widget title 1</h2>
<ul>
....my widget content
</ul>
</li>
<li><h2>Custom widget 1</h2>
<ul class="tabs">
...this one I want to have padding:0..
</ul>
</li>
</ul>
</html>
example of what dman is talking about, with your code:
http://jsfiddle.net/SebastianPataneMasuelli/8WRam/
( i think you might have missed the 's' in .widgets )
I have a menu bar of images. What is the best way to create rollover images for the menu bar?
I am using Visual Studio 2008 in VB.Net
If it's a background image, you can use the css :hover selector to change the background image.
You can do a css solution too. It involves more work on creating the image rollovers, ie on the graphic design side.
See the css in: http://clearleft.com/
You could use a combination of the Menu control, CSS Friendly Adapters, and CSS Sprites.
I've done a lot of these, so feel free to ask any questions.
In the end, you want something like this:
<ul id="nav">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
Style it something like so:
#nav li { float: left; }
#nav a { height: 30px; width: 150px; background: transparent url("bg.png") no-repeat scroll left top; }
#nav a#page1:hover { background-image-position: -30px 0; }
etc. etc...
You'll have to set the background image position of each element, but that tutorial on image sprites should get you there.
The Css Menu Adapter in Asp.Net, unfortunately doesn't put IDs on each element. I edited the source code to do this, but you may want to just do it with html, if you don't need the abstraction the Menu control gives you.
I have a webcontrol with a handful of links displayed at the top, eg:
Link 1 | Link 2 | Link 3
Currently they're each an asp:Hyperlink. Is there a clever solution for rendering out the dividing pipe characters?
Currently they're within the containing placeholder. We can't make any guarantees about a given link always appearing. I don't want a really big if-statement, and I'm reluctant to render all the links purely in the code-behind...
[Update]
Thanks for pointing out that CSS is the way to go. It's certainly made things easier. We did, of course, need a cross-browser solution though.
The HTML list (<ul> & <li>) structure works a treat, as the first-child / last-child properties take care of the end of the list. Note: These are automatic - you don't have to assign them in the markup.
As we only needed pipe symbols, I used the border property. If you wanted, you could use the margin-left + background image CSS properties to have an image spacer instead.
Our solution:
HTML:
<ul class="navMenu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 2</li>
</ul>
CSS:
ul.navMenu li
{
display: inline;
margin-left: 0;
}
ul.navMenu a
{
border-left: solid 1px #333333;
padding-left: 0.4em;
padding-right: 0.4em;
}
ul.navMenu li.first-child a
{
border-left: none 0;
padding-left: 0;
}
The a + a CSS solution doesn't work across all browsers, unfortunately.
I typically mark up my list like:
<ul>
<li class="first-child">Link 1</li>
<li>Link 2</li>
<li class="last-child">Link 3</li>
</ul>
Not only does this provide better JavaScript hooks, but you can customize the left/rightmost element to turn off the border or adjust padding as necessary.
the CSS and/or JQuery method works great. Some times you really might just want <a></a> | <a></a> | <a></a> though.
It might be worth your time to look at a couple of server side controls. Depending on where you get the links (you said some might be missing?) you could just use a control, it has a where you could put the |. If the links are missing depending on who is logged in and some kind of user roles, maybe you can use the sitemap + control, it too has a .