0

Vertical Menu Look and Feel : ZK is Great !!!!! Enjoy

asked 2012-11-07 14:14:11 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

Please refer my blog for source

delete flag offensive retag edit

10 Replies

Sort by ยป oldest newest

answered 2012-11-07 16:21:33 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

Looks great Senthil.

I get the toolbar over not to work and modified the css for that:

  .z-toolbarbutton-over  .z-toolbarbutton-cnt { background:url( ...

link publish delete flag offensive edit

answered 2012-11-07 16:39:58 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8
http://zkframeworkhint.bl...

Looking good

link publish delete flag offensive edit

answered 2012-11-07 18:06:24 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

Oh. But i do not have any problem, i am using 6.5.0 ZK Version. Anyway, original code does not have the alignment. That is the problem in eclipse, when we format the code, it is formatting as wrongly the code inside ZK Style Tab. Here is the aligned code

	<style>
		.z-groupbox-3d-cnt 
		{ 
			border: 0px solid transparent; padding:	0px; 
			background:url('images/tab-mid.jpg') repeat-y scroll 0 0 transparent; 
			float: left; 
			min-height: 401px;
		}

		.z-toolbarbutton-cnt 
		{ 
			background:url('images/tab-nav.gif') repeat-y scroll 0 0 transparent; 
			color: #FFFFFF; 
			float: left;
			font-size: 13px; 
			font-family: arial, sans-serif; 
			height: 20px;
			margin-right: 0; 
			padding: 8px 0 5px 20px; 
			position: relative;
			text-decoration: none; width: 187px; z-index: 1;
		}

		.z-toolbarbutton 
		{ 
			cursor: pointer; display: table-row-group;
		} 
		
		.z-toolbarbutton-over 
		{ 
			background:url('images/tab-hov.gif') no-repeat scroll 0 0 transparent; 
			color: #FFFFFF;
			text-decoration: none; 
		}

		.tabtop 
		{ 
			background:url('images/tab-top.jpg') no-repeat scroll 	0 0 transparent; 
			float: left; 
			height: 64px; 
			width: 990px; 
		}

		tr.z-vbox-sep 
		{ 
			height: 0; 
		}

	</style>

link publish delete flag offensive edit

answered 2012-12-02 19:07:41 +0800

andij62 gravatar image andij62
301 1 6

Hi Senthil,

what should i do to use it with a touch-device. The mouse-over is not available. When i click on a toolbarbutton the element to be marked. Can you give me the corresponding css-style?

Regards
Andi

link publish delete flag offensive edit

answered 2012-12-04 02:11:03 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

Check with this now

<style>
		.z-groupbox-3d-cnt 
		{ 
			border: 0px solid transparent; padding:	0px; 
			background:url('images/tab-mid.jpg') repeat-y scroll 0 0 transparent; 
			float: left; 
			min-height: 401px;
		}

		.z-toolbarbutton-cnt 
		{ 
			background:url('images/tab-nav.gif') repeat-y scroll 0 0 transparent; 
			color: #FFFFFF; 
			float: left;
			font-size: 13px; 
			font-family: arial, sans-serif; 
			height: 20px;
			margin-right: 0; 
			padding: 8px 0 5px 20px; 
			position: relative;
			text-decoration: none; width: 187px; z-index: 1;
		}

		.z-toolbarbutton 
		{ 
			cursor: pointer; display: table-row-group;
		} 
		
		 .z-toolbarbutton-over  .z-toolbarbutton-cnt
		{ 
			background:url('images/tab-hov.gif') no-repeat scroll 0 0 transparent; 
			color: #FFFFFF;
			text-decoration: none; 
		}

		.tabtop 
		{ 
			background:url('images/tab-top.jpg') no-repeat scroll 	0 0 transparent; 
			float: left; 
			height: 64px; 
			width: 990px; 
		}

		tr.z-vbox-sep 
		{ 
			height: 0; 
		}

	</style>

link publish delete flag offensive edit

answered 2012-12-06 18:33:45 +0800

andij62 gravatar image andij62
301 1 6

Hi Senthil,

unfortunately it does not work! The toolbarbutton is not marked "orange" when i click it!
Can you help me?

regards
Andi

link publish delete flag offensive edit

answered 2012-12-07 13:54:00 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

You mean to say you should show the orange color after you clicked one of the tool bar button and then if you click other button, then the previous clicked button should show normal and then newly clicked button should be orange ?

If that is the case, then look here

link publish delete flag offensive edit

answered 2012-12-07 17:09:31 +0800

andij62 gravatar image andij62
301 1 6

Exactly what I'm looking for! Thank you very much.

Regards
Andi

link publish delete flag offensive edit

answered 2012-12-10 10:39:38 +0800

zknl gravatar image zknl
124 2

sorry Senthil ir,
i have downloaded ur code and tried in my project...but its now well working..
m not getting output as u shown here
m using zk version 5.0.6
so plz tell me is it problem regarding the zk version or what ?

Regards
Zknl

link publish delete flag offensive edit

answered 2012-12-11 06:51:44 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

I used 6.5 to Design that page. I am not sure, the Same Z class can be used in lower version. First you try to 6.5, arrive the output as shown above and then modify to lower version after looking the class name in firebug.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2012-11-07 14:14:11 +0800

Seen: 297 times

Last updated: Dec 11 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More