Olá a todos,
Estou recebendo algumas MP, para explicar como eu fiz o menu vertical de uma Administração de Site que desenvolvi.
Modelo: 
Vou postar todo o HTML renderizado e o CSS, e também a adaptação que fiz para o Tema, cada usuário do sistema pode escolher seu tema.
[size="5"]HTML[/size]
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/dot-luv/jquery-ui.css" media="screen" />
<title>Administração</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="default.css" media="screen, projection" />
<!--?php $this->widget('application.extensions.jui.EJqueryUiInclude');?-->
</head>
<body>
<div id="sistema">
<div id="menu" class="ui-widget-header">
<ul id="menu">
<li><a href="admin.html">Principal</a></li>
<li><a href="admin/escola.html">Escolas (<strong>2</strong>)</a></li>
<li><a href="admin/imprensa.html">Imprensas (<strong>1</strong>)</a></li>
<li><a href="admin/pedido.html">Pedidos (<strong>9</strong>)</a></li>
<li><a href="admin/depoimento.html">Depoimento (<strong>1</strong>)</a></li>
<li><a href="admin/cliente.html">Clientes (<strong>6</strong>)</a></li>
</ul>
</div>
<div id="conteudo">
<div id="boxConteudo">
<h2>Administracao</h2>
</div>
</div>
</div>
</body>
</html>
[size="5"]CSS (default.css)[/size]
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, button {
margin: 0;
padding: 0;
border: 0;
outline: 0;
/* font-size: 100%;
vertical-align: baseline; */
background: transparent;
font-family:'Helvetica','Arial';
font-size:12px;
}
div#sistema {
background-color: #EEEEEE;
border-left: 160px solid #222222;
height: auto;
margin-bottom: -20px;
min-height: 100%;
width: auto;
}
div#conteudo {
background-color: #EEEEEE;
color: #222222;
margin-left: 0;
}
div#boxConteudo {
background: none repeat scroll 0 0 #FFFFFF;
height: auto;
margin: 10px;
padding: 10px;
position: relative;
width: auto;
}
/* index.php [ ul id="menu" #menu ] */
div#menu {
padding:10px 0 0 0;
width:160px;
position:fixed;
top:0;
left:0;
z-index:10;
height: 100%;
/*background-image: none;*/
background-position: top left;
}
ul#menu {
list-style: none;
}
ul#menu a {
font-size:12px !important;
text-decoration:none;
line-height:20px;
border: none;
}
ul#menu li {
margin:0;
padding:1px 10px;
background: transparent url('images/arrowmenu.png') no-repeat 151px 2px;
border: none;
}
ul#menu li:hover {
background: transparent url('images/arrowmenu.png') no-repeat 151px -25px;
}
ul#menu .atualPainel {
background: transparent url('images/arrowmenu.png') no-repeat 151px -25px;
}
ul#menu li#imagem {
margin:1px 0 0 -10px;
background:none;
}
Fiz algumas adaptações na extensão jui:
http://www.yiiframework.com/extension/jui/
Observando hoje, a extensão tem a opção de enviar o tema como parâmetro da extensão, como nas versões pioneiras não tinha esse parâmetro, eu setei direto no arquivo da extensão.
Observando essa nova versão da extensão, pode enviar o tema pelo parâmetro que é o mais correto
No HTML onde tem
<!--?php $this->widget('application.extensions.jui.EJqueryUiInclude');?-->
Descomenta o código, e adiciona o título do tema do usuário logado.
<?php
$tema = Tema::model()->findByPk(Yii::app()->user->codtema);
$this->widget('application.extensions.jui.EJqueryUiInclude', array('theme'=>$tema->titulo));
?>
[size="5"]SQL[/size]
--
-- Estrutura da tabela `tema`
--
CREATE TABLE IF NOT EXISTS `tema` (
`codtema` int(<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/cool.gif' class='bbc_emoticon' alt='8)' /> NOT NULL,
`titulo` varchar(120) NOT NULL,
`liberar` int(1) NOT NULL,
`datacriacao` datetime NOT NULL,
PRIMARY KEY (`codtema`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Extraindo dados da tabela `tema`
--
INSERT INTO `tema` (`codtema`, `titulo`, `liberar`, `datacriacao`) VALUES
(1, 'black-tie', 1, '2010-04-27 11:59:06'),
(2, 'blitzer', 1, '2010-04-27 13:17:28'),
(3, 'cupertino', 1, '2010-04-27 13:17:45'),
(4, 'dark-hive', 1, '2010-04-27 13:40:51'),
(5, 'dot-luv', 1, '2010-04-27 13:40:54'),
(6, 'eggplant', 1, '2010-04-27 13:41:58'),
(7, 'excite-bike', 1, '2010-04-27 13:41:58'),
(8, 'flick', 1, '2010-04-27 13:41:58'),
(9, 'hot-sneaks', 1, '2010-04-27 13:41:58'),
(10, 'humanity', 1, '2010-04-27 13:41:58'),
(11, 'le-frog', 1, '2010-05-01 17:45:31'),
(12, 'mint-choc', 1, '2010-05-01 17:45:31'),
(13, 'overcast', 1, '2010-05-01 17:45:31'),
(14, 'pepper-grinder', 1, '2010-05-01 17:45:31'),
(15, 'redmond', 1, '2010-05-01 17:45:31'),
(16, 'smoothness', 1, '2010-05-01 17:45:31'),
(17, 'south-street', 1, '2010-05-01 17:45:31'),
(18, 'start', 1, '2010-05-01 17:45:31'),
(19, 'sunny', 1, '2010-05-01 17:45:31'),
(20, 'swanky-purse', 1, '2010-05-01 17:45:31'),
(21, 'trontastic', 1, '2010-05-01 17:45:31'),
(22, 'ui-darkness', 1, '2010-05-01 17:45:31'),
(23, 'ui-lightness', 1, '2010-05-01 17:45:31'),
(24, 'vader', 1, '2010-05-01 17:45:31');
Verifica atentamente com essas nova versão da extensão, onde está localizada a pasta que vai os css dos temas, abaixo vai o link onde pode-se baixar todos os temas do jqueryui:
Blog jQueryUI
Themes Package: http://jquery-ui.googlecode.com/files/jquery-ui-themes-1.8.16.zip
Se houver algum erro, dúvida, sugestão, pode opinar, estamos aqui para aprender.
Só ensinei a vocês a pescarei, quem pega o peixe e vocês, digo isso, por que o menu pode ser dinâmico, ai vai dá imaginação de vocês.
Estou colocando anexo os arquivos compactado, e contêm a imagem.
1998