[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 921
  • Last Modified:

Wordpress horizontal dropdown menu

Hi, I am trying to get a horizontal drop down menu for my new wordpress blog with several categories (about 10) and then several pages under each category. I am a beginner at wordpress but am very familiar with CSS. Trying to find out if anyone knows where a code such as this would go in a header.php file so that it works? Or does anyone have a blog or website that explains this clearly? I've tried looking online but can't find any good guides.

I'm looking to create a horizontal drop down menu such as these examples:

http://healthyfoodrawdiet.com/

http://www.whateverlife.com/

0
Britni
Asked:
Britni
3 Solutions
 
MrAgileCommented:
hi there,

try: www.cssplay.co.uk.

Sean
0
 
BritniAuthor Commented:
Thanks guys this helps. I just don't know wordpress very well and I should've explained the problem better. But here is the site I'm working on: http://thegirlscene.stunnazine.com and I wanted a horizontal bar like this http://adroitinfosolution.com/blog_2.8.6/ but I don't know where to enter the code to do it? Header.php? Index.php? Style.css only?
<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid #08a0b6;
border-bottom-width:;
font:normal 12px arial;
color:000;
line-height:18px;
z-index:100;
}


#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom:;
padding: 1px 0;
text-decoration: none;
font-weight: bold;font:normal 11px arial;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #000000;
}

</style>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/


//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://www.stunnazine.com/beauty.html">&hearts; Complete Beauty Guide</a>'
menu2[1]='<a href="http://www.stunnazine.com/natural-organic-beauty-tips.html">&hearts; Make Homemade Beauty Products</a>'
menu2[2]='<a href="http://www.stunnazine.com/acne.html">&hearts; Combat  Acne, Get Clear Skin</a>'
menu2[3]='<a href="http://www.stunnazine.com/your_beauty_secrets.html">&hearts; Readers Beauty Secrets</a>'
menu2[4]='<a href="http://stunnazine.com/glowing-skin.html">&hearts; Natural Secret to Glowing Skin</a>'
menu2[5]='<a href="http://www.stunnazine.com/beauty101.html">&hearts; Beauty 101: Models Beauty Secrets</a>'
menu2[6]='<a href="http://www.stunnazine.com/dryskin.html">&hearts; Natural Product: Dry Skin</a>'
menu2[7]='<a href="http://www.stunnazine.com/shiny-hair.html">&hearts; Natural Product: Shiny Hair</a>'
menu2[8]='<a href="http://www.stunnazine.com/shiny-hair.html">&hearts; Summer Beauty</a>'

//Contents for menu 3, and so on
var menu3=new Array()
menu3[0]='<a href="http://stunnazine.com/prom.html">&hearts; Prom Tips and Ideas - Get Ready!</a>'
menu3[1]='<a href="http://www.stunnazine.com/fall-fashion.html">&hearts; Fall Fashion Ideas</a>'
menu3[2]='<a href="http://www.stunnazine.com/fall_shopping_guide.html">&hearts; Fall Shopping Guide</a>'
menu3[3]='<a href="http://www.stunnazine.com/2009-spring-trends.html">&hearts; Top 2009 Spring Trends</a>'
menu3[4]='<a href="http://www.stunnazine.com/2009-fashion.html">&hearts; Interesting New 2009 Fashion</a>'

//Contents for menu 4, and so on
var menu4=new Array()
menu4[0]='<a href="http://stunnazine.com/winterstory.html">&hearts; A Warming Winter Story</a>'
menu4[1]='<a href="http://stunnazine.com/teen-fiction-story.php">&hearts; Summer Story</a>'
menu4[2]='<a href="http://www.stunnazine.com/teen-blog.php">&hearts; What She Sees - Teen Poetry</a>'
menu4[3]='<a href="http://www.stunnazine.com/poetry.html">&hearts; The Grave</a>'
menu4[4]='<a href="http://www.stunnazine.com/the_sweetest_thing.html">&hearts; The Sweetest Thing</a>'

//Contents for menu 5, and so on
var menu5=new Array()
menu5[0]='<a href="http://www.stunnazine.com/anika.html">&hearts; Pop Singer AniKa</a>'
menu5[1]='<a href="http://www.stunnazine.com/konvict-905.html">&hearts; John McMullen / Konvict</a>'
menu5[2]='<a href="http://www.stunnazine.com/cover-dalena.php">&hearts; Ms.Hollywood XTC / Dalena, Ms.Hollywood XTC</a>'
menu5[3]='<a href="http://www.stunnazine.com/maria_katerina.html">&hearts; The Car Model / Maria Katerina, The Car Model</a>'
menu5[4]='<a href="http://www.stunnazine.com/cover_model_cydney.html">&hearts; March Cover Model Cydney</a>'
menu5[5]='<a href="http://www.stunnazine.com/cover_model_sky.html">&hearts; June Cover Model Sky</a>'
menu5[6]='<a href="http://www.stunnazine.com/cover_model_julianne.html">&hearts; July Cover Model Julianne</a>'

//Contents for menu 6, and so on
var menu6=new Array()
menu6[0]='<a href="http://stunnazine.com/say_what.html">&hearts; Say, "I Love You" in 100 Languages</a>'
menu6[1]='<a href="http://stunnazine.com/love.html">&hearts; Get Your Ex Back</a>'
menu6[2]='<a href="http://www.stunnazine.com/cheating-signs.html">&hearts; Is He Cheating? How to tell.</a>'
menu6[3]='<a href="http://www.stunnazine.com/the_sweetest_thing.html">&hearts; Sweet Guys</a>'
menu6[4]='<a href="http://www.stunnazine.com/single_on_valentines_day.html">&hearts; Things to do when youre Single</a>'
menu6[5]='<a href="http://www.stunnazine.com/boyz.html">&hearts; How to Attract Boys</a>'
menu6[6]='<a href="http://www.stunnazine.com/getting-over-ex.html">&hearts; Getting Over Ex</a>'
menu6[7]='<a href="http://www.stunnazine.com/about-boyfriend.html">&hearts; Is it OK for Boyfriends to Look at Other Girls?</a>'

//Contents for menu 7, and so on
var menu7=new Array()
menu7[0]='<a href="http://stunnazine.com/online-diaries.html">&hearts; Read Online Diaries</a>'
menu7[1]='<a href="http://stunnazine.com/thanksgiving_stories.html">&hearts; Your Thanksgiving Disasters</a>'
menu7[2]='<a href="http://www.stunnazine.com/realgirls.php">&hearts; Were models born Beautiful?</a>'
menu7[3]='<a href="http://www.stunnazine.com/mean-girls.php">&hearts; Girl Bullies</a>'
menu7[4]='<a href="http://www.stunnazine.com/makeover.html">&hearts; Makeover our Planet</a>'
menu7[5]='<a href="http://www.stunnazine.com/celebs-without-makeup.html">&hearts; Celebs without Makeup</a>'


//Contents for menu 8, and so on
var menu8=new Array()
menu8[0]='<a href="http://www.stunnazine.com/advice.html">&hearts; Request Free Advice</a>'
menu8[1]='<a href="http://www.stunnazine.com/teen-resources.html">&hearts; Teen Resources / Get Help</a>'
menu8[2]='<a href="http://stunnazine.com/gift-ideas.html">&hearts; Gift Ideas for Everyone</a>'
menu8[3]='<a href="http://www.stunnazine.com/backtoschool.html">&hearts; Back to School: Cool Tips</a>'
menu8[4]='<a href="http://www.stunnazine.com/model-tips.php">&hearts; How to Become a Model</a>'
menu8[5]='<a href="http://stunnazine.com/say_what.html">&hearts; Say "I Love You" in 100 languages</a>'
menu8[6]='<a href="http://stunnazine.com/merry_christmas_different_languages.php">&hearts; Say "Merry Christmas" in 100 languages</a>'
menu8[7]='<a href="http://stunnazine.com/teen-weight-loss.html">&hearts; Teen weight loss guide</a>'
menu8[8]='<a href="http://stunnazine.com/look-thin.html">&hearts; How to look thin</a>'
menu8[9]='<a href="http://stunnazine.com/teen-advice-stage-fright.html">&hearts; Lose Stage Fright</a>'
menu8[10]='<a href="http://stunnazine.com/teen-advice-self-esteem.html">&hearts; Self Esteem</a>'
menu8[11]='<a href="http://www.stunnazine.com/teen-advice-suicide.html">&hearts; Suicide</a>'


//Contents for menu 9, and so on
var menu9=new Array()
menu9[0]='<a href="http://www.stunnazine.com/quiz.html">&hearts; How Sexy are You?</a>'
menu9[1]='<a href="http://www.stunnazine.com/quiz-2.html">&hearts; Are you Good or Bad?</a>'
menu9[2]='<a href="http://www.stunnazine.com/quiz-3.html">&hearts; How Smart Are You?</a>'

//Contents for menu 10
var menu10=new Array()
menu10[0]='<a href="http://stunnazine.com/halloween_treats.html">&hearts; Healthy Halloween Treats?</a>'
menu10[1]='<a href="http://stunnazine.com/health.html">&hearts; Calorie Counter</a>'
menu10[2]='<a href="http://stunnazine.com/nutrition.html">&hearts; Is the "Healthy Food" You Eat Actually Healthy?</a>'
menu10[3]='<a href="http://stunnazine.com/teen-weight-loss.html">&hearts; Teen Weight Loss</a>'
menu10[4]='<a href="http://stunnazine.com/look-thin.html">&hearts; Look Thinner</a>'

		
var menuwidth='17000px' //default menu width
var menubgcolor='white'  //menu bgcolor
var disappeardelay=900  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="no" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onmouseover="clearhidemenu()" onmouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)

dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

</head>

<body>
<div id="container">
<div id="main">
<div id="part1">
<div id="nav_bar">
<div style=" float:left; width:878px; height:30px; ">
<center><table cellspacing="0" cellpadding="0"><tr><td valign="top">
<div id="menuxbar"><ul class="style10" id="menux">

<li><a 
   href="radio.html" class="style15" 
   onclick="return popup(this, 'Stunnazine Radio')">SZ Radio</a></li>

<li><a href="http://www.stunnazine.com/forum/files/" class="style16">Forum</a></li>

<div align="right"></div>
<li><a href="Self-Help-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu8, '220px')" onMouseOut="delayhidemenu()">Advice</a></li>


<li><a href="beauty-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu2, '220px')" onMouseOut="delayhidemenu()">Beauty</a></li>


<li><a href="health-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu10, '250px')" onMouseOut="delayhidemenu()">Health/Fitness</a></li>

<li><a href="Fashion-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu3, '220px')" onMouseOut="delayhidemenu()">Fashion</a></li>

<li>  <a href="Love-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu6, '240px')" onMouseOut="delayhidemenu()">Love/Dating</a></li>

<li> <a href="Real-Life-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu7, '220px')" onMouseOut="delayhidemenu()">Real Life</a></li>


<li> <a href="Fiction-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu4, '220px')" onMouseOut="delayhidemenu()">Fun/Fiction</a> </li>

<li><a href="Quizzes-click-to-see-all.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu9, '220px')" onMouseOut="delayhidemenu()">Quizzes</a></li> 

<li><a href="http://251107.spreadshirt.com/us/US/Shop/">Store</a></li>
<li><a href="http://www.stunnagraphics.com">Graphics</a></li>
<li><a href="Http://stunnazine.com/secret.html" target="blank">Secret</a></li>

</ul>

</div></td>
</tr></table>
</center></div>
</div>

Open in new window

0
 
ZkdogCommented:
I'm looking to do something very similar.  From what I've seen so far, there are a few ways to do this.  One is a combonation of CSS (which I'm not great at) and editing the header.php file.  Look for something along the lines of the code below.  That's your menu.  What you want to do from there is remove the catagories line and add in your own dropdown code.

The other way to do this, is to use a plugin.  There are many out there, some very complicated.  The best one I've found so far is PixoPoint Menu  ( http://pixopoint.com/products/pixopoint-menu/ )  .  It's what I'm using to try to get my dropdown going.  I've got it working, but can't seem to get the CSS right, but maybe you'll have better luck.
<ul class="menu">
    <li class="page_item page_item_1 <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="Home">Home</a></li>
	
<?php wp_list_pages('depth=1&sort_column=menu_order&title_li=' . __('') . '' ); ?>
</ul>

Open in new window

0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now