Menú de Tipo IOS para Pagina Web mediante CSS y JQuey

Quiero mostrarles este curioso menú al estilo de IOS, se realizo mediante el uso de CSS y JQuery

Codigo CSS:

/*
  Globals
*/
body {
  margin: 0;
  background: #556270;
  color: #353d46;
  font: 18px/27px 'Oxygen', sans-serif;
}

h1, h2, h3 {
  color: #FF6B6B;
  margin: 0 0 27px;
}

/*
  Menu
*/
nav#slide-menu {
  position: fixed;
  top: 0;
  left: -100px;
  bottom: 0;
  display: block;
  float: left;
  width: 100%;
  max-width: 284px;
  height: 100%;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
}
nav#slide-menu > ul {
  display: block;
  margin: 40px;
  padding: 0;
  list-style: none;
  opacity: 0.5;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
}
nav#slide-menu > ul li {
  color: #dfe5eb;
  padding: 6px 0;
  cursor: pointer;
}
nav#slide-menu > ul li:hover {
  color: #59e9df;
}
nav#slide-menu > ul li:before {
  font-family: "ico";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  color: #59e9df;
  margin-right: 12px;
  text-align: center;
  font-variant: normal;
  font-size: 0.75em;
  text-transform: none;
  line-height: 1em;
}
nav#slide-menu > ul li.sep {
  margin-top: 7px;
  padding-top: 14px;
  border-top: 1px solid #6b7b8d;
}


body.menu-active nav#slide-menu {
  left: 0px;
}

body.menu-active nav#slide-menu ul {
  left: 0px;
  opacity: 1;
}

/*
  Content
*/
div#content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 60px;
  overflow: scroll;
  background: #fcfeff;
  border-radius: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-shadow: -3px 0 6px #4a5562;
  -webkit-box-shadow: -3px 0 6px #4a5562;
  box-shadow: -3px 0 6px #4a5562;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
}
div#content div.menu-trigger {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 36px;
  height: 36px;
  background: #dfe5eb;
  cursor: pointer;
  border-radius: 5px;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
}
div#content div.menu-trigger:before {
  content: '\e801';
  display: inline-block;
  width: 36px;
  height: 36px;
  color: black;
  font-family: "ico";
  font-style: normal;
  font-size: 1.2em;
  font-weight: normal;
  font-variant: normal;
  text-align: center;
  text-transform: none;
  line-height: 36px;
}
div#content div.menu-trigger:hover {
  background: #556270;
}
div#content div.menu-trigger:hover:before {
  color: #fcfeff;
}

body.menu-active div#content {
  left: 284px;
  border-radius: 7px 0 0 7px;
}

body.menu-active div#content .menu-trigger {
  left: 294px;
}
</style>

La parte de JQuery es la siguiente:
(function() {
var $body = document.body
, $menu_trigger = $body.getElementsByClassName('menu-trigger')[0];

if ( typeof $menu_trigger !== 'undefined' ) {
$menu_trigger.addEventListener('click', function() {
$body.className = ( $body.className == 'menu-active' )? '' : 'menu-active';
});
}

}).call(this);


Y la parte de HTML es crear un menú con la propiedad "nav" y "ul" y "il" , ademas de un div el cual va a contener nuestras paginas lo que vayamos a colocar según la selección del menú

•   <!-- Navigation -->
• <nav id="slide-menu">
• <ul>
• <li class="timeline">Timeline</li>
• <li class="events">Events</li>
• <li class="calendar">Calendar</li>
• <li class="sep settings">Settings</li>
• <li class="logout">Logout</li>
• </ul>
• </nav>
• <!-- Content panel -->
• <div id="content">
• <div class="menu-trigger"></div>
• <h1>iOS style sliding menu</h1>
• <p>Here's an easy way to create an iOS style, side sliding menu.</p>
• </div>

Como llenar un Combo Box en C#

Es bastante sencillo, lo que vamos a realizar es llenar un combobox de windows form extrayendo los datos desde una BD.

Siempre me a gustado trabajar en capas por eso les mostrare desde como hacer el SP (Store Procedure) el llamado de una clase, y la aplicación en el Form

Bueno el SP es un código que me va a traer en este caso los roles de un sistema y los campos que retorna son el Id y el Nombre

SP:

       CREATE procedure[dbo].[trae_datos_roles]

        as

        begin

        select Id_rol, Nombre_rol from Tbl_rol

        end

Luego que tenemos el SP funcionado pasamos al llamado a alguna clase en este caso le llame Roles

 public DataSet retorna_roles()

        {

            Nombre_Sp = "trae_datos_roles";

            ds = cargar_dataset(Nombre_Sp, ref mensaje_error, ref numero_error);

            if (numero_error == 0)

                return ds;

            else

                return null;

En este código se esta usando otra clase llamada UtilidadesBD(Valida las conexiones) que se conecta con la Clase DAL(Lenguaje de acceso a datos) en este caso lo que se manda por parámetros es el nombre del SP y este devuelve un Data Set con la información requerida (Si necesitan las otras clases escríbanme y se las puedo pasar)

Con eso ahora podemos cargar nuestro combo box en el form

Yo cree un procedimiento para llamar a la carga de este combo box de esta manera:

Nomenclatura= cb = combo box , ds = DataSet

  void carga_roles()

        {

            objroles = new Roles();

            ds = new DataSet();

           ds = objroles.retorna_roles();

           cb_roles.DataSource = ds.Tables[0];

           cb_roles.DisplayMember = ds.Tables[0].Columns["Nombre_rol"].ColumnName;

           cb_roles.ValueMember = ds.Tables[0].Columns["Id_rol"].ColumnName;

           objroles = null;

            

        }

Bueno para explicar un poco al inicio llamo a la Clase Roles que vimos ahora la inicializo, luego creo un data set y lo inicializo también, luego cargo se data set con el data set que me retorna el procedimiento de la Clase roles.

Cargo se data set al combo box con la propiedad DataSource.

Luego evaluó para saber que es lo que necesito mostrar al usuario final y cual es el valor que voy a utilizar en mi código para esto están las propiedades DisplayMember y ValueMember como se utiliza en el código anterior

Con esto vamos a tener un combo box cargado con items de la base de datos