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
---------------------------------------------- */
0 comments:
Post a Comment