Main zul file
<zk> <style src="/style.css" /> <window border="none" width="100%" height="100%"> <separator /> <div left="20px" height="25px"> <image src="/images/logo3a.jpg" style="padding-left: 10px;" height="30px" width="auto" /> </div> <separator /> <borderlayout> <north id="north" border="0" height="9%" flex="true"> <div id="Menu" sclass="Mainmenudiv" height="90%"> <include src="menu.zul" /> </div> </north> <west title=" " size="16%" flex="true" splittable="true" collapsible="true"> <div id="nav" style="background:white; height:100%"> </div> </west> <center border="0"> <div height="99%" id="Screen"> </div> </center> <south height="70px"> <div align="center"> <label value="Copyright © 2012 xxxxx All Rights Reserved. Powered By xxxx" sclass="loginlabel" /> </div> </south> </borderlayout> </window> </zk>
Menu zul file
<?page title="" contentType="text/html;charset=UTF-8"?> <zk> <window> <tabbox width="100%" sclass="mainmenu"> <tabs id="tabs"> <tab label="Our Product" sclass="menutabs" /> <tab label="Live Demo" sclass="menutabs" /> <tab label="Online Documentation" sclass="menutabs" /> <tab label="Downloads" sclass="menutabs" /> <tab label="Support" sclass="menutabs" /> </tabs> <tabpanels sclass="mytabpanel"> <tabpanel> <toolbar sclass="maintoolbar"> <toolbarbutton label="Product 1" sclass="maintoolbarbtn"/> <toolbarbutton label="Product 2" sclass="maintoolbarbtn"/> <toolbarbutton label="Product 3" sclass="maintoolbarbtn"/> </toolbar> </tabpanel> <tabpanel> <toolbar sclass="maintoolbar"> <toolbarbutton label="Live Demo 1" sclass="maintoolbarbtn"/> <toolbarbutton label="Live Demo 2" sclass="maintoolbarbtn"/> <toolbarbutton label="Live Demo 3" sclass="maintoolbarbtn"/> <toolbarbutton label="Live Demo 4" sclass="maintoolbarbtn"/> <toolbarbutton label="Live Demo 5" sclass="maintoolbarbtn"/> <toolbarbutton label="Live Demo 6" sclass="maintoolbarbtn"/> </toolbar> </tabpanel> <tabpanel> <toolbar sclass="maintoolbar"> <toolbarbutton label="Documentation 1" sclass="maintoolbarbtn"/> <toolbarbutton label="Documentation 2" sclass="maintoolbarbtn"/> <toolbarbutton label="Documentation 3" sclass="maintoolbarbtn"/> <toolbarbutton label="Documentation 4" sclass="maintoolbarbtn"/> <toolbarbutton label="Documentation 5" sclass="maintoolbarbtn"/> </toolbar> </tabpanel> <tabpanel> <toolbar sclass="maintoolbar"> <toolbarbutton label="Download 1" sclass="maintoolbarbtn"/> <toolbarbutton label="Download 2" sclass="maintoolbarbtn"/> <toolbarbutton label="Download 3" sclass="maintoolbarbtn"/> <toolbarbutton label="Download 4" sclass="maintoolbarbtn"/> <toolbarbutton label="Download 5" sclass="maintoolbarbtn"/> </toolbar> </tabpanel> <tabpanel> <toolbar sclass="maintoolbar"> <toolbarbutton label="Support 1" sclass="maintoolbarbtn"/> <toolbarbutton label="Support 2" sclass="maintoolbarbtn"/> <toolbarbutton label="Support 3" sclass="maintoolbarbtn"/> <toolbarbutton label="Support 4" sclass="maintoolbarbtn"/> <toolbarbutton label="Support 5" sclass="maintoolbarbtn"/> </toolbar> </tabpanel> </tabpanels> </tabbox> </window> </zk>
CSS File
/* Start: Main Tabs Menu
---------------------------------------------- */
.Mainmenudiv {
background-image: url('./images/menubgsmall.png');
background-position: top center;
}
.menutabs.z-tab .z-tab-text {
color: white;
cursor: pointer;
font-family: arial, sans-serif;
font-size: 12px;
font-size-adjust: none;
font-weight: bold;
padding: 4px 14px;
white-space: nowrap;
}
.menutabs.z-tab .z-tab-hl:hover .z-tab-text {
padding: 6px 14px;
color: yellow;
font-weight: bold;
}
.mainmenu.z-tabbox .z-tab .z-tab-hm {
background-image: url('./images/blank_p.gif');
background-color: transparent;
background-position: center;
background-repeat: repeat;
height: 36px;
}
.mainmenu.z-tabbox .z-tab .z-tab-hm:hover {
background-image: url('./images/blank_over_p.gif');
background-color: transparent;
background-position: center;
background-repeat: repeat-X;
height: 36px;
padding: none;
margin: none;
}
.mainmenu.z-tabbox .z-tab-seld .z-tab-hm {
background-image: url('./images/current-bg.png');
background-color: transparent;
background-position: center;
background-repeat: repeat-X;
height: 36px;
padding: none;
margin: none;
}
.mainmenu.z-tabbox .z-tab .z-tab-hl {
background-image: url('./images/blank_p.gif');
background-color: transparent;
background-position: left;
background-repeat: repeat;
height: 36px;
}
.mainmenu.z-tabbox .z-tab .z-tab-hl:hover {
background-image: url('./images/blank_over_p.gif');
background-color: transparent;
background-position: left;
background-repeat: repeat;
height: 36px;
padding: none;
margin: none;
}
.mainmenu.z-tabbox .z-tab-seld .z-tab-hl {
background-image: url('./images/current-bg.png');
background-color: transparent;
background-position: center;
background-repeat: repeat-X;
height: 36px;
padding: none;
margin: none;
}
.mainmenu.z-tabbox .z-tab .z-tab-hr {
background-image: url('./images/blank_p.gif');
background-color: transparent;
background-position: right;
background-repeat: repeat;
height: 36px;
}
.mainmenu.z-tabbox .z-tab .z-tab-hr:hover {
background-image: url('./images/blank_over_p.gif');
background-color: transparent;
background-position: right;
background-repeat: repeat;
height: 36px;
}
.mainmenu.z-tabbox .z-tab-seld .z-tab-hr {
background-image: url('./images/current-bg.png');
background-color: transparent;
background-position: center;
background-repeat: repeat-X;
height: 36px;
padding: none;
margin: none;
}
.mainmenu.z-tab .z-tab-hl:hover .z-tab-hr {
background-position: right 0;
}
.mainmenu.z-tab .z-tab-hl:hover .z-tab-hl {
background-position: left 0;
}
.mainmenu.z-tab .z-tab-hl:hover .z-tab-hm {
background-position: center 0;
}
.mytabpanel.z-tabpanel {
border-top: none;
}
.mytabpanel .z-tabpanel, .mytabpanel .z-tabbox-ver .z-tabpanel-ver {
padding: 0px;
}
.mytabpanel.z-tabpanel,.z-tabbox-ver .z-tabpanels-ver {
border-color: transparent;
border-style: solid;
border-width: 1px;
}
.z-tabs-header {
height: 32px;
margin: 0;
overflow: hidden;
position: relative;
height: 32px;
}
.maintoolbar.z-toolbar {
border-color: transparent;
border-style: solid;
border-width: 0 0 1px;
display: block;
padding: 2px;
position: relative;
}
.z-toolbar .maintoolbarbtn .z-toolbarbutton-cnt {
color: #000000;
font-family: Tahoma, verdana;
font-size: 1em;
font-weight: Bold;
padding: 2px 10px 2px 10px;
position: relative;
border-left: 0px solid #dddddd;
border-right: 0px solid #eeeeee;
border-top: 0px solid #e0e0e0;
}
.maintoolbar.z-toolbar {
background: none;
height: 18px;
}
.maintoolbarbtn.z-toolbarbutton-over .z-toolbarbutton-cnt {
background-image: none;
background-color: #cff791;
}
/* End: Main Tabs Menu
---------------------------------------------- */