According to the Worpress Codex, any page can be set as the front page simply by editing the settings. First you must create two pages – the html page you want to use as the main landing page (call it “Home”) and a blank blog page (call it “Blog”).

In the WordPress Admin interface select Settings > Reading. Look for the section titled “Front page displays” and select “A static page (select below)”. In the drop-down box for front page choose your “Home” page. In the drop-down list for Posts page choose your “Blog” page.

You will now have a new static front page and a blog page.

Finally, depending on your theme, you might have 2 navigation links to the home page. You can remove the duplicate easily by first determining the page number used for the static front page.

(From WordPress.com: You can determine the page number by going to Pages->Edit and hovering over the title of the page. The status bar of your browser will display a URL with a numeric ID at the end. This is the page ID.)

Determine the file where the navigation is displayed (it may be header.php) and find the wp_list_pages statement. Exclude the static front page:

wp_list_pages('exclude=7');

Now, if you want your home page to be more dynamic you can create a custom page template for the home page. To learn more about using page templates, visit the Codex here.

This should be all you need to do to create a static front page and a secondary blog page. This change allows the WordPress platform to be used on most websites, with the blogging secondary to the main website content.

In this example  we will create 3 buttons. Two of the buttons will open a hidden div from which other navigation options are presented, the third button will be a direct link to a new page. You can view a demo here.

To begin, create the navigation menu. The first button has a hidden div with id ‘button1′ containing 3 sub-menu items and a link to close the box. The second button also has a hidden div but this one has a lot of entires requiring a scroll bar. The third button has no sub-menu and hence no hidden div. 

<ul class="maintabs clearfix">
  <li><a id='button1' href='#'>First Button</a>
      <div id='button1div' class='popup clearfix' style='position:absolute; top:100px; left:65px; height: 180px; display:none; overflow: auto'>
        <ul>
           <li><a href="# onclick="Animation(document.getElementById('button1div')).to('height', '0px').to('opacity', 0).hide().go(); return false;">Close this window</a>
           <li><a href='page1a.php'>Option A</a></li>
           <li><a href='page1b.php'>Option B</a></li>
           <li><a href='page1c.php'>Option C</a></li>
        </ul>
      </div>
  </li>
  <li><a id='button2' href='#'>Second Button</a>
      <div id='button2div' class='popup clearfix' style='position:absolute; top:100px; left:150px; height: 180px; display:none; overflow: auto'>
        <ul>
           <li><a href="#" onclick="Animation(document.getElementById('button1div')).to('height', '0px').to('opacity', 0).hide().go(); return false;">Close this window</a>
           <li><a href='page1a.php'>Option A</a></li>
           <li><a href='page1b.php'>Option B</a></li>
           <li><a href='page1c.php'>Option C</a></li>
           <li><a href='page1d.php'>Option D</a></li>
           <li><a href='page1e.php'>Option E</a></li>
           <li><a href='page1f.php'>Option F</a></li>
           <li><a href='page1g.php'>Option G</a></li>
           <li><a href='page1h.php'>Option H</a></li>
           <li><a href='page1i.php'>Option I</a></li>
           <li><a href='page1j.php'>Option J</a></li>
           <li><a href='page1k.php'>Option K</a></li>
           <li><a href='page1l.php'>Option L</a></li>
        </ul>
     </div>
  </li>
  <li><a id='button3' href='anotherpage.php'>Third Button</a></li>
</ul>

Next we need some FBJS to detect when the mouse moves over the navigation links. In this example I have made each hidden div the same size so they can share the code. It would be simple to change this to use a different size/shape/fade for each div if required. The script first determines which object fired the event. It then closes all other hidden divs and fades up the required new div. 

<script>
function mouseaction(evt) {
eventFiredBy_ObjectId = evt.target.getId();
if (eventFiredBy_ObjectId == 'button1') targetId = document.getElementById('button1div');
else if (eventFiredBy_ObjectId == 'button2') targetId = document.getElementById('button2div');
 
//First hide all other divs
if (eventFiredBy_ObjectId != 'button1') document.getElementById('button1div').setStyle({display: 'none'});
if (eventFiredBy_ObjectId != 'button2') document.getElementById('button2div').setStyle({display: 'none'});
 
// then make the new div visible:
if (eventFiredBy_ObjectId != 'button3') {
Animation(targetId).to('height', 'auto').from('0px').to('width', '150px').from('0px').to('opacity', 1).from(0).show().go();
}
}
 
//add event listener to divs (mouseover & mouseout)
document.getElementById('button1').addEventListener('mouseover',mouseaction);
document.getElementById('button2').addEventListener('mouseover',mouseaction);
document.getElementById('button3').addEventListener('mouseover',mouseaction);
 
</script>


Facebook provides a “blind” effect which would prevent the text rolling in the box as it opens. We choose not to use it here since we need the scrollbar on the second hidden div.
 
Below the navigation list you need a div that has enough height to exceed the largest hidden div. This will ensure the entire hidden div will be revealed on the mouseover.

To navigate through the menu, the user will mouse over the tabs to open the sub-menu, if any. The sub-menu will remain displayed until the user mouses over another tab or until they select a link from the sub-menu.

The complete example source code is available for download in a text file here.