How Random Babbling Becomes Corporate Policy (t3knomanser) wrote in component_help,
How Random Babbling Becomes Corporate Policy
t3knomanser
component_help

Popup Menus..

I whipped up a set of all CSS popup menus. As a warning, they won't work in IE. Period. Why? IE sucks. That's why. It doesn't follow the standard. However, if you wish to encourage support for standards compliant browsers, read on.

This is more an HTML/CSS tutorial than a Component one, but since it's in _my_ component style, I figured I'd throw it up here.


First, in your print_custom_head you must extend your stylesheet overrides.

	div.menu ul, div.menu ul li, div.menu ul li a {
		display:block;
		margin:0;
		padding:0;
		border:0;
	}

	div.menu ul {
		width:150px;
		border:1px solid #9d9da1;
		background:white;
		list-style:none;
	}

	div.menu ul li {
		position:relative;
		padding:1px;
		padding-left:26px;
		background:url("get your own damn image URL (26px x 26px is the appropriate size)") no-repeat;
                border-bottom: 1px solid #5a5a5a;
		z-index:9;
	}
	li.folder	{  
		background:url("get your own damn image URL") no-repeat;
	}		
	li.folder:hover { z-index:10; }		
	li.folder ul {
			position:absolute;
			display:none;
			left:120px; /* IE */
			top:5px;
	}		
	li.folder>ul { left:140px; }
	
	ul.level1 li.folder:hover ul.level2, 
	ul.level2 li.folder:hover ul.level3 {
		display:block;
	}

	a.menuitem {
		padding:2px;
		border:1px solid white;
		text-decoration:none;
		color:gray;
		/*font-weight:bold;*/
		width:100%; /* IE */
	}
	li>a { width:auto; }

	li a.submenu {
		padding:2px;
		border:1px solid white;
		text-decoration:none;
		color:gray;
		font-weight:bold;
		width:100%; /* IE */
		background-color: #c0c0FF;		
	}

         li a:hover {
		border-color:gray;
		background-color:#bbb7c7;
		color:black;
	}
	li.folder a:hover {
		background-color:#bbb7c7;
	}


Then, you need to use this in HTML somehow. In one of your functions (i put it at the top with the print_my_entries override) you'll want to output the following HTML. Now, as a warning to you, don't put it in your profile or free text if they're on the right hand side of the window- it'll just fall off the screen and not do anything. You can fiddle with the CSS to fix that.

<table><tr>
<td>
<!--- START OF VIEWS MENU --->
<div class="menu"> <!--- Enclose a menu in this div tag --->
<ul class="level1"> <!--- There are three levels total, for how deep into the menu you are--->
  <li class="folder"> <!--- To make a submenu, use a list item of class "folder"--->
    <a href="" class="submenu">Views</a> <!--- This captions the submenu--->
    <ul class="level2"> <!--- Then all of this is the content--->
      <li><a href="$p.base_url" class="menuitem">Entries</a></li> <!--- Everything in the menu should be of class menuitem--->
      <li><a href="$p.base_url/friends" class="menuitem">Friends</a></li>
      <li><a href="$p.base_url/data/rss" class="menuitem">RSS</a></li>
    </ul>
  </li>
</ul>
</div>
<!--- END OF VIEWS MENU --->
</td>
<td>
<!--- START OF TOOLS --->
<div class="menu">
<ul class="level1">
  <li class="folder">
    <a href="" class="submenu">LJ Tools</a> <!--- Tools Menu --->
    <ul class="level2">
      <li class="folder">
        <a href="" class="submenu">Customization</a> <!--- Customization sub menu --->
        <ul class="level3">
          <li><a href="http://www.livejournal.com/customize" class="menuitem">Basic S2</a></li>
          <li><a href="http://www.livejournal.com/customize/advanced" class="menuitem">Advanced S2</a></li>
          <li><a href="http://www.livejournal.com/doc/s2/" class="menuitem">S2 Docs</a></li>
        </ul>
      </li>
      <li><a href="http://www.livejournal.com/syn" class="menuitem">Syndication Controls</a></li>
    </ul>
  </li>
</ul>
</div>
</td>
<td>
<!--- USEFUL BOOKMARKS --->
<div class="menu">
<ul class="level1">
  <li class="folder">
  <a href="" class="submenu">Bookmarks</a>
  <ul class="level2">
    <li><a href="http://lcc.doesntexist.com" class="menuitem">LCC Home</a></li>
    <li><a href="http://discord.doesntexist.com" class="menuitem">Hail Eris!</a></li>
    <li class="folder">
    <a href="" class="submenu">Download These</a>
    <ul class="level3">
      <li><a href="http://www.mozilla.org/products/firebird" class="menuitem">Firebird</a></li>
      <li><a href="http://www.mozialla.org/products/thunderbird" class="menuitem">Thunderbird</a></li>
      <li><a href="http://liquidninja.com/metapad/" class="menuitem">Metapad</a></li>
    </ul>
    <li><a href="http://www.livejournal.com" class="menuitem">LiveJournal</a></li>
    <li><a href="http://www.google.com" class="menuitem">Google</a></li>
    <li><a href="http://www.boingboing.net" class="menuitem">BoingBoing</a></li>
  </ul>
  </li>
</ul>
</div>
</td>
</tr></table>

Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 13 comments