How to Create a Beautiful Dropdown Blogroll Without JavaScript
215Dropdown menus are a great way of including a long list of links without cluttering up your page. The issue though is that they can be hard to style, but look quite ugly if you don’t. There isn’t a lot of flexibility with HTML’s <select> tags.
Well, why not do it with plain HTML instead?
In this post, I’m going to walk you through how I’ve set up the blogroll in our upcoming redesign. Load up the example page to see how our final product will look.
By using CSS only, you avoid slowing down your page while visitor’s download an extra script. On top of that, you don’t need to worry about user’s having JavaScript disabled.
The only caveat is that this method won’t work on IE6 (At least, not without doing some tweaking specifically for IE6 users). But as you’ll see at the end, this could be much more accessible than if you used JavaScript.
1 – Create the Image
The HTML we use later won’t have any traditional <select> codes, so by itself, it’s not going to look anything like a dropdown. We need to take care of that ourselves.
The image you create can look any way you want it to, but since this is a dropdown menu, a little arrow pointing downwards is your best option for easy usability.
The size of the image is also important. It can be any height you like, but the width will be the width of your dropdown.
This is what I have ended up with:
2 – Set up The HTML
Now we set up our HTML. This is where the power of this method comes into play, you are using simple HTML that you can later style in any way that suits you.
We need an unordered list to store all of the links. We will then precede that with a paragraph (or a ‘h’ tag if you prefer) to title it, and finally, we wrap the whole thing in a div.
Your final markup should look like this:
<div class="blogroll"> <p>Blogroll</p> <ul> <li><a href="http://www.site.com/">Example Site</a></li> <li><a href="http://www.site.com/">Example Site</a></li> <li><a href="http://www.site.com/">Example Site</a></li> </ul> </div> |
Of course, you may want to use WordPress’ wp_list_bookmarks(); function to use the built in linkroll instead. Either will work.
3 – Style The Menu
For now we are going to forget about the dropdown functionality, and simply design the dropdown as it will be when someone’s mouse is over the image.
The first step is to replace the paragraph text with the image we created earlier.
.blogroll p { background:url(pbd-css-blogroll-rollover-img.png) 0 0 no-repeat; width:274px; height:21px; text-indent:-9999px; } |
As you can see, we apply the image as the background first. We then set the dimensions of the paragraph to be the same as those of the image, and finally, we use text-indent to hide the “Blogroll” text from our HTML.
Next we have to style the list. Because our HTML is so simple, you will have no problem styling this any way you like. For instance, you can set a background on the dropdown, or add other types of HTML (Like images).
All I am going to do here is set up a plain list of all the links, and change the background color of each link on rollover. The CSS I’ve used is as follows: (Feel free to adapt for your own site)
.blogroll ul { width:272px; background:#214868; border:1px solid #48758d; border-width:0 1px 1px 1px; padding:0; list-style:none; } blogroll ul a:link, .blogroll ul a:visited { display:block; width:252px; padding:2px 10px 2px 10px; text-decoration:none; color:#93b8d3; font-weight:normal; } .blogroll ul a:hover, .blogroll ul a:active {background:#366386;} |
The final thing to note is that we currently have a space between our image and our drop-down. We can remove this by amending our CSS:
.blogroll p, .blogroll ul {margin:0;} |
4 – Create the Dropdown
Now it’s time to create the dropdown. The trick is very straightforward – We are going to use the div to hide everything other than the image until the user’s mouse is over it.
To start with, let’s hide everything other than our image.
.blogroll { width:274px; height:21px; overflow:hidden; } |
And then we just use the :hover pseudo-class to allow the excess to be shown when the user scrolls over the image.
.blogroll:hover {overflow:visible;} |
5 – Fix The Issue of Pushing Content Down
We are almost done. The rollover works, but when the menu appears, it pushes all the content beneath it down. This jumping content looks poor.
We are going to fix that by using absolute positioning to put the dropdown menu above all the other content. That way, there will be no jumping when the menu comes into play.
The first step is to amend the blogroll div to be positioned relatively (So that the dropdown’s absolute positioning can be anchored by this div).
.blogroll {position:relative;} |
Now use CSS to position the menu right under the image.
.blogroll ul { position:absolute; left:0; top:21px; } |
6 – Issues with IE 6
This menu won’t work with IE6 because it does not support :hover on anything other than links.
There are some workarounds to this using JavaScript. For instance, you could use conditional comments so that IE6 users use JavaScript to see the menu. Or you could try to teach IE6 to use :hover properly.
But given that the whole point of this was to avoid extra scripts, the best solution might be to simply hide the menu altogether. It’s not crucial content and if as few of your reader’s use IE6 as this site’s does, your best bet may just be this:
.blogroll {display:none;} html>body .blogroll {display:block;} |
Conclusion
You can see the full code in working order on the example page. I love the control you have over it and the fact that you aren’t using any scripts so load times are as fast as they can be.
Not supporting IE6 is a drawback, but not as serious a one as it could be. For instance, 14% of this site’s visitors have JavaScript disabled, but only 2.6% are using IE6. That means that 5 times more people have a working blogroll than if I had used a JavaScript solution.
What do you think? Will you be using a CSS-only menu on your blog at some point, or do JavaScript effects still hold sway over you?
Enjoy this post? You should follow me on Twitter!
Drop downs are wonderful to keep the layout less cluttered and organized. It presents a very clean look and allows for easier site navigation. This is an excellent tutorial, I wish it worked on IE6 as well so more people can make use of it :) Thanks for sharing this, very useful!
Indeed They’re wonderful! And this simple one makes them just fantastic! :)
This is just fantastic mate. Thanks a lot :)
sounds greatful…
i am from this place,
http://www.plasticcardonline.com/design/design.html
thank you for this excellent article, extremely well writen and very easy to follow.
This is a great i have been looking for this blog you have excellent posts and links. Thanks for sharing!
Really usefull and simple: well done!
.-= docpap´s last blog ..Hard disk virtuali =-.
Great tutorial, extremely easy to follow. Just what I was looking for for my new site design.
.-= Squidge´s last blog ..Keeping the Cosmic Trigger Happy: Super Furry Animals live at Somerset House =-.
This issue has become a pervasive theme during the conference that the representatives have unanimously decided to do something radical to address the problem
Finally I found this tutorial on your blog. I already looking for something like this for my company website development. I like the way you wrote this tutorial, clear explanation and easy to understand. Thank a lot for this useful tutorial.
[…] don’t. There isn’t a lot of flexibility with HTML’s <select> tags. Well, Pro Blog Design is going to show you how to do it with plain HTML instead Check out Link […]
Exellent work! Thanks!
Nice tutorial, especially with the added IE6 support.
I recently re-designed my blog, and used a nice bit of jquery and css to keep the side bar clean, you can check it out for ideas if you want http://www.brianyerkes.com/
Thanks for the post
.-= Brian Yerkes´s last blog ..How To Increase Your RSS Subscriber Numbers =-.
good post.. bookmarked..
.-= tasarhane´s last blog ..Google Chrome İşletim Sistemi =-.
Wow, this is Super XHTML Tutorial.. I will test it.
.-= Freelance Jobs´s last blog ..softphone for a voipswitch =-.
[…] How to Create a Beautiful Dropdown Blogroll Without JavaScript – Eine schöne und funktionelle Blogroll ist immer wieder ein großes Thema unter Bloggern. In dieser Anleitung wird erklärt, wie man eine schöne Blogroll ohne Javascript erstellt und sich dabei trotzdem im DropDown Stil entfaltet. […]
Glad everyone enjoyed the post, I’ll try to keep writing more like it! :)
@Brian – The redesign looks awesome! The JQuery animations on your sidebar menus are great, very nicely done :D
wow very clever, it looks beautiful..
.-= joyologo design shop 2.0’s Latest Post : premium news wordpress theme =-.
[…] por la red me encuentro un excelente tutorial en Pablogdesign de como crear un dropdown menu con los enlaces de tu blogroll, todo esto sin la necesidad de […]
Great! will test it for sure
Very nice read. Thank you for the information. Will apply this information and see the results.
well… thanks for share
[…] Martin, gran diseñador y blogger de Pro Blog Design, es un tecnica que usa CSS para crear un bello dropdown blogroll sin necesidad de […]
[…] Create beautiful blogroll down-drop (without Javascripts) […]
this is an awesome technique i will be using it a lot now! ^^
[…] Create beautiful blogroll down-drop (without Javascripts) […]
[…] Create beautiful blogroll down-drop (without Javascripts) […]
[…] Create beautiful blogroll down-drop (without Javascripts) […]
Wow, great. use ?
[…] Antivirus para WP Mejorar el tiempo de carga de la página Deshabilitar comentarios viejos, por medio de PHP Minicart Otra forma para mostrar la fecha Today’, ‘Yesterday’, ‘2 Days Ago‘, ‘2 Weeks Ago‘… Comentarios compaginados Buscar links rotos Mostrar entradas aleatorias por categoría Crear blogrolls (dropdown menu) sin javascriptiwsrcplus="http://codenew.impresionesweb.com/r/banner_iw.php?idrotador=51011&tamano=300×250&lgid="+((new Date()).getTime() % 2147483648) + Math.random(); document.write(""); Suscríbete a nuestro Feed RSS | Etiquetas: antivirus para wp, Hacks, hacks de wordpress, trucos, trucos de wordpress, widgets, wordpress, wp Deja un mensaje, o Trackback desde tu sitio. […]
[…] Plus you can tell it to show the excerpt or the full content in addition to title of the post. * Dropdown Blogroll This guide will teach you how to create a beautiful dropdown blogroll without javascript. * Better […]
[…] Create beautiful blogroll down-drop (without Javascripts) […]
[…] Create beautiful blogroll down-drop (without Javascripts) […]
[…] Create beautiful blogroll down-drop (without Javascripts) […]
[…] plugin to help people who use WordPress to manage their post’s custom fields with ease.Create beautiful blogroll down-drop (without Javascripts)Title says it all. Click here for a demo.Automatically insert content after each postIf you have […]
[…] plugin to help people who use WordPress to manage their post’s custom fields with ease.Create beautiful blogroll down-drop (without Javascripts)Title says it all. Click here for a demo.Automatically insert content after each postIf you have […]
[…] Create beautiful blogroll down-drop (without Javascripts) […]
Thanks for this; I’m in the process of making my first website, and whilst I’m getting along quite nicely with Javascript as a whole I prefer to exclude it when I can. This is the best tutorial I’ve found offering a purely HTML/CSS based method…that looks good. I’ll be subscribing too :)
yeah beautiful menu and girl.
[…] Create beautiful blogroll down-drop (without Javascripts) […]
[…] Create Beautiful Blogroll Down-Drop (Without Javascripts) […]
[…] Create beautiful blogroll down-drop (without Javascripts) […]
[…] 28. Crear blogroll hermosa (sin Javascripts) […]
[…] Crear un BlogRoll Dropdown con JavaScript en ProBlogDesign […]
[…] Create beautiful blogroll down-drop (without Javascripts) […]
Great tutorial! But i don’t like to use dropdown menu in my blog. hehehh。。。
[…] Create beautiful blogroll down-drop (without Javascripts) […]
[…] Create beautiful blogroll down-drop (without Javascripts) […]
[…] Create Beautiful Blogroll Down-Drop (Without Javascripts) […]
[…] Create beautiful blogroll down-drop (without Javascripts) […]
[…] Create beautiful blogroll down-drop (without Javascripts) […]
[…] On your blog, try to keep the blogroll short, especially if it displays on all your pages so you ensure you don’t have too many links. Blogrolls also take a lot of space on your page, so you can make it non-intrusive by using a snazzy dropdown. […]
[…] How to Create a Beautiful Dropdown Blogroll without JavaScript – A complete tutorial for creating dropdown menus using just plain HTML. […]
very Good…!
[…] Non-Javascript Lightbox A Super Simple Horizontal Navigation Bar A Vertical menu with flyout lists How to Create a Beautiful Dropdown Blogroll Without JavaScript Experimental – Sliding menu Make website images look like a video with this CSS effect Fixed […]
[…] Create beautiful blogroll down-drop (without Javascripts) […]
can this be modified for categories in wordpress?
cool…how to using this trick :D
[…] How to Create a Beautiful Dropdown Blogroll without JavaScript – A complete tutorial for creating dropdown menus using just plain HTML. […]
I plan on putting this to use tonight! thanks alot for the great write up.
You are explaining everything in a perfect way with screen shots and screens. the article reading is exceptionally good
now a days we don’t need to worry about java script as most of the emails don’t work(yahoo,msn)
Hello there,
Im just trying this out on my XMPP server. I wondered if there is a possibility to add and removes links from and to the blogroll without hardcoding the sidebar.php everytime.
other than this: Excellent idea and explanation ;)
[…] Create beautiful blogroll down-drop (without Javascripts) […]
[…] How to Create a Beautiful Dropdown Blogroll without JavaScript – A complete tutorial for creating dropdown menus using just plain HTML. […]
[…] Create a Beautiful Dropdown Blogroll Without JavaScript This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6. […]
[…] Create a Beautiful Dropdown Blogroll Without JavaScript This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML […]
[…] Create a Beautiful Dropdown Blogroll Without JavaScript This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6. […]
[…] Create a Beautiful Dropdown Blogroll Without JavaScriptThis tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6. […]
[…] Create a Beautiful Dropdown Blogroll Without JavaScript […]
[…] Create a Beautiful Dropdown Blogroll Without JavaScript This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6. […]
[…] Create a Beautiful Dropdown Blogroll Without JavaScript This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6. […]
Is there anyway to bring the content to the top by using CSS. I would like to render the content before any menu or blog roll.
Great tutorial.
[…] Create a Beautiful Dropdown Blogroll Without JavaScript This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6. […]
[…] Create a Beautiful Dropdown Blogroll Without JavaScript This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6. […]
awesome!
thanks for sharing
[…] 8. Creati o caseta de Blogroll restransa, (Drop-down), fara javascript […]
Amazing!
I don’t ever imagine without Javascript we can still do it. Thanks for sharing. Bookmark now.
Yes i think with css and DHTML we can do alot of thinks that we do in Javascript.
Correct me if i am wrong
[…] Criar um lindo Blogroll sem JavaScript […]
May I ask why are we trying to avoid Java here, beside the point that it might slow down the loading time of the site/blog a little?
Although I use, less to none on my blog (java) sometimes I feel like such tricks are not worth the time.
awesome tutorial, i’m glad to find this tutorial
rgds
[…] 1.How To Create A Beautiful Dropdown Blogroll Without Javascript […]
[…] 1.How To Create A Beautiful Dropdown Blogroll Without Javascript […]
[…] 1.How To Create A Beautiful Dropdown Blogroll Without Javascript […]
TOO NICE TIPS…
THANK’S FOR SHARE…
Hey – I found your tutorial while looking for a way to clean up my blog. I’m still in the process, and I added your dropdown code for my friends’ private blogs, but ran into a snag..
I don’t have any issues with jumping content at all. My dropdown appears behind all my other content. Did you ever have this problem? How can I make it appear in front of the content??
Thanks – your tutorial is really well written and easy to follow..
-Tiff
Oh.. and the dropdown is for the little label that says “Private!” along the side. :)
[…] 1.How To Create A Beautiful Dropdown Blogroll Without Javascript […]
[…] 1.How To Create A Beautiful Dropdown Blogroll Without Javascript […]
[…] Create a Beautiful Dropdown Blogroll Without JavaScript This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6. […]
Wow, this is a really nice post. It is not often you find a very helpful post that includes the working preview! Kudos.
I have added the code to my site and will customize it as soon as I get some time….I really love the use of CSS over using something like Sucker Fish. So much simpler and easier to implement. Thanks again!
I have added the code to my site and will customize it as soon as I get some time….I really love the use of CSS over using something like Sucker Fish. So much simpler and easier to implement. Thanks again!……
Wow look at that spam right below my first comment…the decency it takes to copy and paste the previous comment, just for a back-link.
Gah, that’s a nasty new trick from them. Hopefully something Akismet will be able to auto-detect soon!
Thanks for the heads up though, deleted it now!
And to reply to your original comment; it’s great to hear you liked the tutorial! I think having a working example is an essential for a post like this, you want to see the output before you put the time into working through it! :)
thanx…
nice xelent , am searchng abt to hw to create dropdown menu.
Thanks for this tutorial. I think it is pretty stylish, although it would be cool to have it fade in, but that could probably mean javascript!
Ok, I need help! Somethings wrong with my dropdown!
[…] 1.How To Create A Beautiful Dropdown Blogroll Without Javascript […]
[…] Beautiful Dropdown Blogroll Without JavaScript […]
[…] Beautiful Dropdown Blogroll Without JavaScript […]
[…] Beautiful Dropdown Blogroll Without JavaScript […]
[…] Beautiful Dropdown Blogroll Without JavaScript […]
where to add this html? in add page element?
Is this really faster than using jQuery? What would be the benefit?
[…] How to Create a Beautiful Dropdown Blogroll without JavaScript – A complete tutorial for creating dropdown menus using just plain HTML. […]
we should paste this comments in edit html or add gadget html format?
[…] 18, 2009 Code Snippets Matthew Trevino Tags: code, snippets, WordPressTaking a page from this tutorial at Problogdesign.com, you can apply this drop-down menu method to just about anything in […]
[…] Create beautiful blogroll down-drop (without Javascripts) […]
Loved the post.
I am taking the liberty of adding a reference to your article on my CSS aggregator site. Do let me know if you are ok with this.
圣荷Stherb丰胸|Stherb丰胸|圣荷丰胸|
丰胸|
圣荷Stherb丰胸|Stherb丰胸|圣荷丰胸|
圣荷Stherb丰胸|Stherb丰胸|圣荷丰胸|
丰胸|
圣荷Stherb丰胸|Stherb丰胸|圣荷丰胸|
丰胸|
圣荷Stherb丰胸|Stherb丰胸|圣荷丰胸|
丰胸|
丰胸|
圣荷Stherb丰胸|Stherb丰胸|圣荷丰胸|
圣荷Stherb丰胸|Stherb丰胸|圣荷丰胸|
丰胸|
圣荷Stherb丰胸|Stherb丰胸|圣荷丰胸|
丰胸||丰胸||丰胸|
2e68丰胸
|Stherb|Stherb|Stherb|Stherb|Stherb|Stherb|Stherb|
oh, so many chinese comments. :P
BTW, great sharing.
I was looking for a trick like this. Thanks a lot man. Working Dude.
Hi there,
Thanks for the explanation and codes. However, I am newbie to this drop down menu setup. I am having problem in putting the code in my blog. The submenus appear but not it disappear when moved the mouse (not able to select it).. and the submenus are more to the left…
Really need your help… thank you so much in advance.
Cheers!
[…] 1.How To Create A Beautiful Dropdown Blogroll Without Javascript […]
[…] Beautiful Dropdown Blogroll Without JavaScript […]
[…] 23.How to Create a Beautiful Dropdown Blogroll Without JavaScript A good tutorial on how to create a dropdown blogroll. DEMO […]
[…] 1.How To Create A Beautiful Dropdown Blogroll Without Javascript […]
[…] 23.How to Create a Beautiful Dropdown Blogroll Without JavaScript A good tutorial on how to create a dropdown blogroll. DEMO […]
Taking the liberty of adding a reference to your article on my CSS aggregator site
I usually do go through the spam filter, so even the simple fact you have a Gravatar will help any future comments of yours stand out for me
based on the photoshop default picker. But you can use it to create color palettes and save them for future use. Also, you can download the palettes that you create as
To be honest, I’ve never even considered doing dropdowns with CSS. I wasn’t aware of the significant percentage of JS-disabled users. I’m just curious, how did you find out you have 14% JS-disabled users? I don’t think Google Analytics presents this data.
Wow – I was going nuts trying to add a single dropdown menu item in an otherwise mostly html website until a friend pointed this page out. Alas, unlike the blog example, it’s pretty crucial (list of published works by author) so I’ll have to check out whateverhover but it looks pretty straightforward. Thanks!
Well, I’ve got it working… but not in line with the rest of the menu items on the index page in question (they’re centered on the page, not in a vertical line on the edge – again, this is NOT a blog). I’ve already given the appropriate XHTML heading, so it’s not that. What do I need to know that I don’t?
Great tutorial… :) IE6 – The ancient browser does not load many codes properly ;). But your guidelines to fix that problem was awesome :)
Good tips. I’ll learn about this tricks. I’m is newest blogger…
Great tutorial Bos ! Thank’s
Thank you for sharing these steps. Many users will be able to save time and effort because of the tips that were given.
Total beginner here, is there any chance you can tell us where to put each code (custom functions? stylesheet?) Also, can you provide a finished product code, without the steps? I don’t know what goes where, it’s kind of hard to follow if you don’t know code.
What about moving the thing into the middle of a toolbar instead of a sidebar? I tried, got nowhere, gave up and went back to javascript. Though I’ll probably go over it again after I finish reading the CSS manual (been winging it for years, finally decided to actually rtfm :) ), because I assume some of those features are exact screen locations or something.
I tried your suggestion, doesnt work at all. Please explain clearly
Greaat material. I saw such blofroll at free web templates
Beautiful – it’s really simple and makes my blog look much cleaner and less cluttered.
I modified it so that it would work when I hovered over my Blogger sidebar widget header. However, I obviously missed something as the hover background color didn’t fill the entire row, just the area with text (as with the underline effect styled by the .sidebar CSS) – http://fuguetraveller.blogspot.com
Still, I love it! Thanks!
Can anyone answer my question 4 posts above? Thanks. Where is this code placed, and which parts? I am getting lost in the steps.
@Andy D
1 – create the image you plan to use, making sure it is the width that you plan to use for your blogroll.
2 – this is html code which goes where you put the rest of your html code. The div class “blogroll” tells it which set of instructions to use in presentation.
3 – 5 – these sections go into the style sheet. Or if you really MUST you could put them in the header between style tags, but why?
6 – refers to fixing or working around problems with the IE 6 browser, which, given that the current version is 8 iirc, may not be worth the bother.
As for final code, that can be found in the outlined boxes in each section. Put the html in the html, and the style in the style sheet.
Is that first code really html, or is it php? Html didn’t work for me on wordpress.org and I tried installing a php widget plugin but that didn’t work either. Still running errors on my site.
XHTML
[…] On your blog, try to keep the blogroll short, especially if it displays on all your pages so you ensure you don’t have too many links. Blogrolls also take a lot of space on your page, so you can make it non-intrusive by using a snazzy dropdown. […]
Thanks for sharing such an Wonderful Topic.. I will refer to my Near one and I will Bookmark your Site for Upcoming Post….
Thanks for the tutorial dude.
This was easy to follow, much appreciated.
Hi there!
This tutorial is exactly what I was looking for! Thanks!
But I would like to line vertically five blogrolls, and following your tutorial it seems that the list don’t position over the figures below, or move them to show its list. How could I do that?
Thanks again!
Tico
[…] Create beautiful blogroll down-drop (without Javascripts) […]
nice tutorial… it is the real tutorial that I need.
thanks a lot for share
Thanks for the article, nice to read something that helps to improve the se readability.
Wow, this is amazing. I can’t wait to try this out. Thanks so much!
Great post. 5 – Fix The Issue of Pushing Content Down – solved my problem in seconds with your fix. So obvious when you see the solution in front of you!
This is great! I got everything working except for some reason the text indent isn’t following through and I can’t get the standard Blogroll title out of there to be replaced by my image file.
Any thoughts?
Thanks!
I’m utterly perplexed as how Sam can consider “Crash” a shallow film.
[…] Create a Beautiful Dropdown Blogroll Without JavaScript This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6. […]
[…] How To Create A Beautiful Dropdown Blogroll With JavaScript […]
great…
let me try..
thanks…….
[…] Create a Beautiful Dropdown Blogroll Without JavaScript This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6. […]
Good read, Thx! Less is more.
Thanks a lot for these mate!
Great icons. Really beautiful and really cool. Thanks
Awesome tutorial! Not only is this a beautiful way of displaying one’s blogroll but it also helps the user save a lot of screen space. However, I noticed that you forgot to add a period to one of the CSS codes. It would be cool if you can add it in because it would definitely help out other HTML amateurs like me who mainly perform “copy” and “paste” when it comes to adding in codes to our templates!
Great post, this is really very helpful when you are integrating it with HTML
Thanks
[…] to Create a Beautiful Dropdown Blogroll Without JavaScript problogdesign.com – by Michael Martin How to Create a Beautiful Dropdown Blogroll Without […]
thanks for sharing, I Like this post :)
[…] How to Create a Beautiful Dropdown Blogroll without JavaScript (如何不使用 JavaScript 建立一个漂亮的下拉友情链接列表) – 使用纯 HTML 建立一个下拉菜单的全面教程。 […]
Fantastic explanation and very good idea
This is what am looking for, thanks for the excellent tutorial.
[…] Create Beautiful Blogroll Down-Drop (Without Javascripts) […]
[…] 1.How To Create A Beautiful Dropdown Blogroll Without Javascript […]
[…] Create a Beautiful Dropdown Blogroll Without JavaScript This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6. […]
[…] How to Create a Beautiful Dropdown Blogroll without JavaScript – A complete tutorial for creating dropdown menus using just plain HTML. […]
[…] Create Beautiful Blogroll Down-Drop (Without Javascripts) […]
[…] HOW TO CREATE A BEAUTIFUL DROPDOWN BLOGROLL WITHOUT JAVASCRIPT […]
[…] HOW TO CREATE A BEAUTIFUL DROPDOWN BLOGROLL WITHOUT JAVASCRIPT […]
I love this theme :)
Perfect :)
I want to rich and buy this theme :)
Anh of course , Thanks you for this tutorial :)
I will try
[…] Criar um Blogroll bonito Dropdown Sem JavaScript Este tutorial demonstra como o estilo de um menu drop-down para manter seu conteúdo blogroll (em vez de usar o tipicamente-ugly HTML <select> elemento). Feito com CSS puro, mas requer hacks para trabalhar com IE6. […]
Thanks to this one! It really help me a lot.! :)
Perfect, this is a great resource for us!
[…] Create a Beautiful Dropdown Blogroll Without JavaScript This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6. […]
[…] Cómo crear un Blogroll desplegable hermosa sin JavaScript – Los menús desplegables son una excelente manera de incluir una larga lista de enlaces sin saturar su página. […]
[…] How to Create a Beautiful Dropdown Blogroll Without JavaScript – Dropdown menus are a great way of including a long list of links without cluttering up your page. The issue though is that they can be hard to style, but look quite ugly if you don’t. There isn’t a lot of flexibility with HTML’s select tags. […]
[…] How to Create a Beautiful Dropdown Blogroll Without JavaScript – Dropdown menus are a great way of including a long list of links without cluttering up your page. The issue though is that they can be hard to style, but look quite ugly if you don’t. There isn’t a lot of flexibility with HTML’s select tags. […]
[…] How to Create a Beautiful Dropdown Blogroll Without JavaScript – Dropdown menus are a great way of including a long list of links without cluttering up your page. The issue though is that they can be hard to style, but look quite ugly if you don’t. There isn’t a lot of flexibility with HTML’s select tags. […]
Thanks for this great tutorial.
looking for long time for this tutorial..
GBU
[…] How to Create a Beautiful Dropdown Blogroll Without JavaScript – Dropdown menus are a great way of including a long list of links without cluttering up your page. The issue though is that they can be hard to style, but look quite ugly if you don’t. There isn’t a lot of flexibility with HTML’s select tags. […]
[…] How to Make a Wonderful Dropdown Blogroll Lacking JavaScri… – Dropdown menus are a splendid way of counting a lingering list of links lacking cluttering up your page. The come forth though is including the intention of they can be hard to style, but look quite hideous if you don’t. There isn’t a lot of flexibility including HTML’s brilliant tags. […]
[…] 23.How to Create a Beautiful Dropdown Blogroll Without JavaScript A good tutorial on how to create a dropdown blogroll. […]
[…] Create a Beautiful Dropdown Blogroll Without JavaScript This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6. […]
Thank you Michael for this great tutorial! I customized it somewhat so it flows nice in my template.
Thanks a lot. This is great stuff and very helpful to me!
[…] Beautiful Dropdown Blogroll Without JavaScript […]
[…] Beautiful Dropdown Blogroll Without JavaScript […]
[…] Beautiful Dropdown Blogroll Without JavaScript […]
Thanks for the article, nice to read something that helps to improve the se readability.
Thanks for this great tutorial.
[…] 23.How to Create a Beautiful Dropdown Blogroll Without JavaScript A good tutorial on how to create a dropdown blogroll. DEMO […]
[…] HOW TO CREATE A BEAUTIFUL DROPDOWN BLOGROLL WITHOUT JAVASCRIPT […]
[…] HOW TO CREATE A BEAUTIFUL DROPDOWN BLOGROLL WITHOUT JAVASCRIPT […]
[…] 1.How To Create A Beautiful Dropdown Blogroll Without Javascript […]
[…] 1.How To Create A Beautiful Dropdown Blogroll Without Javascript […]
[…] Get it here […]
[…] […]
Cool tutorial. I’m trying to modify it so it works with tabbing any suggestions?
If you use wordpress you can download blogroll dropdown plugin here: http://wordpress.org/extend/plugins/blogroll-dropdown/ . It’s very easy to use.
nice tutorial. i still search the best blogroll design
Excellent javascript and css Tutorial .
After examine a couple of of the weblog posts in your web site now, and I actually like your way of blogging. I bookmarked it to my bookmark web site checklist and will be checking again soon. Pls check out my website as effectively and let me know what you think.
Your house is valueble for me. Thanks!…
[…] How to Create a Beautiful Dropdown Blogroll without JavaScript– A complete tutorial for creating dropdown menus using just plain HTML. […]
Thanks, I had a menu with the Pushing Content Down issue and your guide helped. I just added the absolute position to the CSS for the menu’s UL. Other posts were not so useful for what looks like a common problem!
[…] How to Create a Beautiful Dropdown Blogroll without JavaScript (如何不使用 JavaScript 建立一个漂亮的下拉友情链接列表) – 使用纯 HTML 建立一个下拉菜单的全面教程。 […]
thanks for article. but, how dropdown can work if we add thumbnail? please help me how to add it with custom css
[…] How to Create a Beautiful Dropdown Blogroll Without JavaScript – Dropdown menus are a great way of including a long list of links without cluttering up your page. The issue though is that they can be hard to style, but look quite ugly if you don’t. There isn’t a lot of flexibility with HTML’s select tags. […]
good work