Take Your Menus to the Next Level
Over the past several weeks I experimented off and on to create a highly customized menu for this blog. This new menu includes drop downs which I think cleans the look up quite well while providing direct access to interesting posts, labels, pages, etc. I think this is much better than what Blogger offers out of the box, so I thought why not provide a tool so others can create their own.
Using the Dropdown Menu Designer
Hopefully most functionality is pretty straight forward, but here's a quick break down. There are Four main tabs Design/Preview, Import, Customize and Get Code. Let me being by briefly explaining each.
- Design/Preview toggles between the Design view, where you may add new menus and set links and the Preview view which shows you what the finished menu looks like.
- Import gives you the option to load an existing menu built with this tool into the Designer. For instance since I've installed on on this blog typing http://www.jsblogstop.com loads in my menu. You may then use the designer to modify it.
- Customize displays an editor with the currently active CSS applied to the Preview menu. You may modify the code and apply changes or reset to defaults. You'll need to understand CSS quite well to do more advanced customization, though I hope to provide more accessible tools in the future.
- Get Code retrieves the HTML and CSS active on the Preview menu. You may then copy the code to either update an existing menu or add a new HTML/Javascript widget to your blog.
42 comments :
This looks fabulous, thanks! Is there any way to customise it to suit the look of my blog?
Thanks for all the great info you have here. :-)
@Danielle,
The customize tab allows you to edit the CSS driving your menu and preview the changes instantly. You may even import your menu later to edit the same way. Although this requires a good bit of CSS knowledge, it's the best I could do with limited resources at this time. Building a CSS WYSIWYG editor would be nice, but a lot more work unfortunately. Still, I like this setup pretty well since I've iterated a few different designs for this blog all with this post.
Although, basic color manipulation could be setup with template designer extension using this Tutorial and the source classes. I started to do just that when originally writing this tool, but decided it was more trouble than it was worth since I'd need about a dozen style selectors across 3 variable groups. You might try it if you're feeling adventurous though.
J
Fantastic - thanks so much! I'm learning as I go, so every opportunity to do something different is good! :-)
Glad you like it Danielle
Hi and thank you for the help!
Can you check out my link and tell me why this doesn't look quite right?
http://seed2sprouttestblog4.blogspot.com/
Thanks so much!
Keri
@Keri, It looks like some of the default styles blogger imposes on the Tabs section are causing you problems. I mostly intended this to be placed in a different section, as I've done here and never noticed those problems.
I'll take a little time this evening to see if I can't fix some of those problems in the default stylesheet. You'll have to do an import, then result the styles to default for that to help you though. I'll update the post and comments once I have something.
James
Thanks so much!
I applied a few default style updates tonight. Not certain I got all your problems Keri, but a few for sure.
Hi James,
Is there any way I can take out the boxes that appear on parent and sub categories when hovering? Also just wondering if it is possible for me to adjust how far down the sub menus are when hovering?
Thanks so much for all of your help!
Keri
I updated the code again for the hover boxes, they were coming from your template line 296. Thought I'd fixed that, apparently it didn't make it into the copy.
You'll have to customize the CSS to alter the spacing. The 'top' setting in this style within the customize code does that.
#js-blogger-menu-preview .js-blogger-sub-menu {
display: none;
position: absolute;
top: 15px;
width: 200px;
padding: 0;
z-index: 10;
background: #f3f3f3 url(img/gradient.png) repeat-x 0 0;
border: solid 1px #B4B4B4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
Do I just drop that code into the add css box in the advanced section of the template designer?
I tried pasting it in there and changing the number of px for the 'top' but nothing changed so I'm sure that I'm doing something wrong but I'm not sure what.
So sorry for all the novice type questions, just trying to get the hang of this stuff!
Thanks so much again!
Keri
It's probably easiest to import your menu, then click the customize tab in the designer above. Scroll down until you find the quoted style, change the 15 to something else, then get the code and paste it into your widget. Or you could just edit the value from the code you've pasted in already.
James
Okay, I am almost there and cannot thank you enough for your help!!! I will be passing your name along to others to come check out your site.
Could you check one last time and tell me why I have a line under the home button on hover and why there is a faint rectangle that shows up only when I hover from the left side of the What is Crossfit and the Schedules button?
Other than those things, we are in business. You are so great to help me out so much!
Keri
@Keri, you've included an empty sub menu on the Home button, so when the mouse hovers over it is revealed. Remove that either with the designer or direct from source and you should be set. The code you're looking for is this: <ul class="js-blogger-sub-menu"></ul> just after the Home link.
Perfect, thank you.
The only other things are those semi-transparent boxes that show up only when I hover from the left hand side of the 'What is Crossfit' and the 'Schedules' button. Would that be something that I can fix in the code inserted into the gadget?
I cannot thank you enough!
Keri
@Keri, I do not see what you're talking about with the 'semi-transparent boxes'.
It is kind of a strange thing. They only show up (and are very faint) if you go in directly from the left hand side of those two buttons. It shows up as a very transparent grey box over the main darker grey button.
If I hover from the bottom or the left hand side, they don't show up for me at all.
You'll have to provide an image, because I don't see anything out of the ordinary. There is a hover background color change, but that happens on every mouse action.
You bet!
Here is a screen shot of what I am seeing.
https://docs.google.com/leaf?id=0B_wXocBf0IGxOWRjMzQwNmEtOGM5MS00OTE1LTk3NjYtMGI0NGEwNTYxMDY4&hl=en_US
Link not found
And that was a link to an ad spam file host. Use your google account with picasa
https://picasaweb.google.com/100183282076447723256/September182011?authuser=0&feat=directlink
I hope this one works, sorry to waste your time today.
Another link not found
Sorry... had to switch my settings.
If this one doesn't work, I'll just let it go. :)
https://docs.google.com/leaf?id=0B_wXocBf0IGxOWRjMzQwNmEtOGM5MS00OTE1LTk3NjYtMGI0NGEwNTYxMDY4&hl=en_US
What browser are you using? I can't replicate this in any of my 4.
Safari
That's peculiar. I was only able to sometimes get the result you showed in Safari. About 90% of my mouse overs it didn't bug out, but the other 10% the right side border radius wasn't applied correctly. Not found a Safari fix for this oddity yet though.
Thank you for good post.. I see this comments form is so cold, if you wish I would like to get this Comments form code.. thank you
Bima Lanang
I tried this dropping menu frm lots of sources but never really worked...At start im so happy to see your site. its like all set no editing template and stuff, jst customize and go. I've got a problem in my blog, i pasted the code after customizing menus from your site... but they dont scroll down, no effect is happening.. Its like all labels one by one appearing one below one but they dont appear as main page which drops labels. Please suggest me a solution
-Emmanuel
Nice information, its very usefull
Software Akuntansi Laporan Keuangan Terbaik
What a great site, thanks so much for adding it... I do have a question though:
I am trying to create multiple drowns, and the only one that shows up is the first drop down.
http://testblogpractice.blogspot.com/
For example, when you hover over "Basketball" then "2011/2012" you should see a menu to the right and down.
I have a few I created like this, and I can only see as far wide as the first main drop down.
I am sure you will be able to see how it was created.
Any help would be amazing! Thank you again.
@Johnny, Looks like you need to add this style to the code the designer provided.
#js-blogger-menu .js-blogger-sub-menu {
overflow: visible;
}
A style from the blogger template you have was setting that to hidden. This should make it all show up now.
James
Thank you so much James for the quick response. It works. I had been looking all over the internet for a good drop down menu, and I found it here.
Another question, the drop down menu I have noticed does not work 100% in Chrome. The drop down menu hides behind my blogger posts (all my posts are videos from youtube).
http://www.hoosierchannel.com
Any help would be great. I have noticed a lot of people viewing my site use chrome. They also use Internet Explorer, and I have no idea how my site works with IE... but if I can get the menu to work fully with Chrome that would nice.
And thanks again for helping me figure out the first problem I had a few weeks ago! This drop down menu is awesome, so easy to update.
Thank you!
@Johnny, that isn't a problem with the menu, but instead the embedded videos you're using. They are windowed objects, which means the videos want to display over top of all other page elements. The only way to change that is to use a different method of placing. Refer to this: YouTube IFrame WMode Issue and if that doesn't help you search google for YouTube Wmode transparent for more info.
James
Great, thank you. I was wondering if that (the embedded video) was the problem. Too bad not everyone uses Firefox, like me!
Thank you for the reply!
Another question... I have used your dropdown menu on three of my sites, and I love all of them. The one thing I have been very confused about is why two work well with my iPhone, and one doesn't work as well.
http://www.johnnykingart.com
http://www.johnnykingdesign.com
Those two work well navigating the menu on the iPhone.
http://www.hoosierchannel.com ... on the other hand does not work. When I click on one of the top menus it automatically refreshes the page instead of dropping the menu down and allowing me to navigate.
I have tried many things, and have been confused for a few weeks now. I figured I would ask you to see if you have come across this before. I even created another test blog with the same design template settings and added the drop down menu to it and it WORKED, until I imported my blog posts from Hoosier Channel... and then it stopped working. I don't know what my blog posts have in them to make the menu not work on the iPhone.
Sorry I have had so many questions! I really appreciate your help.
1 Word......"NICE"...
Hi....great widget!
Unfortunately it is not working in my Blog. Please look at the attached image
https://lh6.googleusercontent.com/-jZiKwnf7faQ/UBzQESYAjEI/AAAAAAAABsU/jN6j4ZM4idA/s912/fermicg.gif
I copied the generated code in to a new html/java script gadget and placed below the header. But the sub menus are showing and no drop down effect.
Where the menu should be
Tutorials=> Maya=> Modelling,animation etc
Tutorials=> Cinema 4d=> etc
But the whole code is messed up. Please help
Oh my goodness, bless your soul!! I have been ALL over the web looking for info on how to add this and your automated designer is the ONLY thing that works!!! Thank you so very much, and I'll be sure to link back to you so everyone knows what a rock star you are!!
Hi there
I´m very pleased with your work.
However I have one issue: How to make a gap between the parent menu and the submenus? As it is now the list with the submenus show up in the middle of the parent menu.
Post a Comment