Vamos a crear un menú sencillo con jQuery, este menú aparecerá en la parte izquierda de nuestra web y según pinchemos en las opciones del menú irán apareciendo en la parte derecha de nuestra página, efectuando un efecto de salida y otro de entrada sin cambiar de página.

Para realizar este tipo de menú utilizaremos una capa (DIV) para el menú y otra capa (DIV) para cada una de las opciones del menú donde aparecerá el contenido del menú.

Lo primero que vamos hacer es crearnos una capa donde meternos otra capara para el menú y otra capa para el contenido de este menú,

<div class="todo">
    <div class="divmenu"> 
     
    </div>
    <div class="contenido">
     
    </div>
    
  </div>

Mediante CSS le aplicamos formato a las diferentes capas, quedando algo similar a lo siguiente:

<style type="text/css">
.todo {
    margin: auto;
    width: 800px;
}
.divmenu {
    float: left;
    width: 200px;
}
.contenido {
    float: right;
    width: 590px;
}
</style>

Con esto le indicamos que la capa todo (será la que contenga la página) tendrá un ancho de 800px, mientras que el menú estaría a la izquierda y tendrá un ancho de 200px y el contenido estaría a la derecha con un ancho de 590px.

A continuación creamos el menú con una lista desordenada (ul) que meternos entre de la capa menú.

<div class="divmenu"> 
    <ul class="menú">
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
    </ul>
</div>

y le aplicamos unos estilos mediante CSS, por ejemplo que no tenga viñetas, el ancho, alto, color etc.. de los elementos del menú, con un código similar a:

.menú {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.menú li a {
    color: #30C;
    text-decoration: none;
    background-color: #FF9;
    height: 30px;
    width: 190px;
    margin-top: 10px;
    display: block;
    line-height:30px;
}

Ahora para cada menú hay que crear una capa dentro de la capa contenido, para que al pinchar en la opción del menú se muestre la capa correspondiente y se oculten el resto.

<div class="contenido">
    <div>
        <p>Opcion1</p>
        <p>&nbsp;</p>
    </div>
    <div>
        <p>Opcion2</p>
        <p>&nbsp;</p>
    </div>
    <div>
        <p>Opcion3</p>
        <p>&nbsp;</p>
    </div>
    <div>
        <p>Opcion4</p>
        <p>&nbsp;</p>
    </div>
</div>

Les aplicamos mediante CSS un color una altura mínima.

.contenido div {
    background-color: #CCF;
    min-height:1200px;
}

Con esto lo tenemos todo preparado para insertar el código jQuery y que se oculten y se muestren las capas según el menú seleccionado. Lo primero que hacemos es ocultar todas las capas que se encuentran dentro de la capa contenido menos la primera. A continuación añadimos una función (click) para saber cuando hemos pinchado en un menú, en este caso ocultamos todas las capas, averiguamos en que menú hemos pinchado con la función index y mostramos la capa que se encuentra en dicha posición.

<script type="text/javascript">
    $(document).ready(function(){
        $(".contenido div:gt(0)").css("display","none");
        $(".menú li a").click(function(){
            $(".contenido div").css("display","none");
            var posicion=$(".menú li a").index(this);
            $(".contenido div").eq(posicion).fadeIn("slow");
        });
    });
</script>

A continuación podemos ver un ejemplo de como quedaría el menú.