Welcome to the first in a series of Ning Creators blog posts focusing on simple design tricks you can use on your network.Trick #1: Adding an Arrow Indicator to Navigation DropdownsThe pulldown menus created by our Tab Manager feature are extremely popular, however some Network Creators have expressed interest in displaying an arrow indicator next to tabs that have a dropdown menu (to make it clear to members that there's more content inside that tab). You can see this in action on Enrique Iglesias' official social network.To achieve this effect, visit the "Manage" tab, then the "Analytics" section. Paste in the following snippet underneath anything else that may already exist (don't delete anything):<script type="text/javascript">if (typeof(x$) != 'undefined') {//Adding "dropdown" class to nav tabs that have subtabsx$("li.xg_subtab[dojotype='SubTabHover']").addClass("dropdown");}</script>Save the changes. Now visit the "Manage" tab again, followed by the "Appearance" section. Click on the "Advanced" tab.If you have a light background color on your network, add the following code underneath anything else that may already exist (don't delete anything):.dropdown {padding-right:5px;background:url(https://static.ning.com/creators/design/black-arrow.png) no-repeat right center;}If you have a dark background color on your network, add the following code underneath anything else that may already exist (don't delete anything):.dropdown {padding-right:5px;background:url(https://static.ning.com/creators/design/white-arrow.png) no-repeat right center;}Save the changes. You're all set. You can adjust the "5px" number above to tweak the spacing that appears to the left of the arrow, and if you want to use a different arrow image or support legacy web browsers, you can create a new image with an image editing program, then swap out the existing black-arrow.png or white-arrow.png URL with your custom image's URL.Note that this technique works best on themes in which tabs don't have a separate background color when selected, though certainly feel free to experiment. Happy dropdowning!
You need to be a member of Ning Creators Social Network to add comments!
Comments
Click/drag on this symbol ▼ to highlight it. Right click on it and copy [or Control+C]. Go to your Tab Manager section and paste it to whatever tabs you'd like it to appear......then save. Maybe my screen shot will help
Won't work...any ideas?
Thanks for starting the thread Kyle, but your solution didn't work on my network. Howard thanks for your simple solution - perfect.
An alternative simple and effective method: Under Tab/Pages, paste this symbol ▼ next to each tabs name which holds a drop down. You can view its appearance here http://stockbuz.net
Mat... Thanks for that. Sometimes the most simple solutions are the best. For now, I just included that on a tab that i want people to focus on. Furthermore, on my machine, the javascript solution doesn't seem to work in Chrome.
-
1
-
2
-
3
-
4
of 4 Next