Open Script Solution

Today I modified the vertical menu on my another website by changing its style become vertical button. When mouse hovers on the link, then it will look pressed just like when you push a button. In addition, the selected menu will look different with the other normal menu or link. So here is the following code that how you can do it to your WordPress blog. You can see its demo on the right Sidebar of Visual Basic Indonesia.

1. Open your styles.css located on your theme name directory, and add this following code:

   /* Nav Container */
   #navcontainer
   {
     width: 100%;
     margin: 0 auto;
     padding: 1em 0;
   }
    
   ul#navlist
   {
     text-align: left;
     list-style: none;
     padding: 0;
     margin: 0 auto;
     width: 100%;
   }
    
   ul#navlist li
   {
     display: block;
     margin: 0;
     padding: 0;
   }
    
   ul#navlist li a
   {
     display: block;
     width: 100%;
     padding: 0.5em 0 0.5em 1em;
     border-width: 1px;
     border-color: #ffe #aaab9c #ccc #fff;
     border-style: solid;
     color: #777888;
     text-decoration: none;
     background: #f7f2ea;
   }
    
   #navcontainer>ul#navlist li a { width: auto; }
    
   ul#navlist li#active a 
   {
     background: #f0e7d7;
     color: #800000;
   }
    
   ul#navlist li.current_page_item a 
   {
     background: #f0e7d7;
     color: #800000;
   }
    
   ul#navlist li a:hover, ul#navlist li#active a:hover
   {
     padding: 0.6em 0 0.5em 1em;
     color: #800000;
     background: #f0e7d7;
     border-color: #aaab9c #fff #fff #ccc;
   }
   /* Nav Container */

2. You can use this .css code for example if you want to display the recent posts on your blog sidebar. Open your sidebar.php file, and add this code to that file:

   <div id="navcontainer">
    <h2>Recent Posts</h2>
     <ul id="navlist">
     <?php
       $posts = get_posts('numberposts=20&orderby=post_date');
       $post_title = $post->post_title;
       foreach($posts as $post) {
         setup_postdata($post);
         if ($post_title == get_the_title() && is_single()) {
           echo '<li class="current_page_item"><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
         } else {
           echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
         }
       }
       $post = $posts[0];
       ?>
     </ul>
   </div>

That’s all. Enjoy the code!