CSS Navigation Menu?

  • Author
    Posts
  • #255291

    The navigation bar in my header is getting cluttered (charlestaylortrial.org). I’m not thrilled with the pages widget, and anyway want to use the sidebar real estate for things other than navigation. The natural solution would seem to be drop/flyout navigation menu at the top. Just as an example, when a reader hovers the mouse over “Resources” below it pops up a list with “Documents”, “Links”, “Daily Summaries”, “News”. Standard stuff.

    Can this be implemented on WordPress.com with custom CSS (please please please)? Or do I have to migrate over to wordpress.org… (please no please no please no)?

    #255569

    boblets
    Member

    You can’t do that. You would need access to the html to make anything sensible.

    #255572

    deltafoxtrot
    Member

    HTML in a Text Widget and some CSS trickery can do this. But beyond vague pointers in the right direction, you’d be on your own.

    #255573

    boblets
    Member

    If delta says so, then so it is.
    I think I would have tried to compact the info on the pages first, if I was you. Such as putting “who we are” and “mission” on the same page, under “about us” or something like that.

    #255574

    Thanks for the quick responses! Alas, looks like I may be exporting.

    #255593

    lee9931
    Member

    For a simple solution you could modify your css and change the font size of your menu text. Not a perfect solution but then nothing in web development ever is. Then try as boblets says and combine pages. Together they would make the menu look less cluttered, and less obtrusive on the page.

    #255594

    deltafoxtrot
    Member

    I’ll have another look with my Xrays when I get home tonight.

    #255650

    deltafoxtrot
    Member

    Since this is not your everyday nonsense blog, I took some 15 minutes and threw this together

    #mainmenu{
    	height: 23px;
    	width: 192px;
    	z-index: 1646;
    	position: absolute;
    	top: 8px;
    	overflow: hidden;
    	right: 7px;
    	background: white url(http://deltafoxtrot.files.wordpress.com/2008/08/bild-1.png) no-repeat center center;
    	}
    	#mainmenu:hover{
    	overflow: visible;
    	}
    #mainmenu ul {
    	display: none;
    	background-repeat: repeat-y;
    	}
    #mainmenu:hover ul {
    	display: block;
    	}
    #mainmenu:hover ul li{
    	display: block;
    	}
    #mainmenu:hover ul li a{
    	display: block;
    	}

    Looks like this:
    http://deltafoxtrot.files.wordpress.com/2008/08/bild-2.png

    #255651

    deltafoxtrot
    Member

    Well, it’s ugly and not yet tested against anything but Safari 3.1. But I hope this helps.

The topic ‘CSS Navigation Menu?’ is closed to new replies.