Tabs for menu section

entourage
Inactive member
Topic Author
New Member

11 years 6 months ago #30024 by entourage

Tabs for menu section was created by entourage

Hi,

I would like to add tabs to the menu section. Most restaurants and or bars have many different menus. I found that you use tabs on the template One Page. I downloaded One Page and searched for a tab component or module without luck.

Is it possible to create different tabs (menus) like the One Page template that has the same styling as the Food Spirit template and used on the Menu page?

Thank you in advance,
Chris

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

11 years 6 months ago #30028 by ivan.milic

Replied by ivan.milic on topic Tabs for menu section

In one page template we have :

{loadposition advert2}

and in advert2 postion we have custom HTML module having HTML like this:

Code:

<div id="tabs">
<ul>
<li><a class="bigtext" href="#tabs-1"><img src="images/tabs/executive.png" alt="icon" /><br />Executive<br /><span class="subheading">Management</span></a></li>
<li><a class="bigtext" href="#tabs-2"><img src="images/tabs/architect.png" alt="icon" /><br />Architect<br /><span class="subheading"> Environment</span></a></li>
<li><a class="bigtext" href="#tabs-3"><img src="images/tabs/marketing.png" alt="icon" /><br />Marketing<br /><span class="subheading">Advertisement</span></a></li>
<li><a class="bigtext" href="#tabs-4"><img src="images/tabs/finance.png" alt="icon" /><br />Finance<br /><span class="subheading">Investments</span></a></li>
</ul>
<div id="tabs-1">{loadposition tab1}</div>
<div id="tabs-2">{loadposition tab2}</div>
<div id="tabs-3">{loadposition tab3}</div>
<div id="tabs-4">{loadposition tab4}</div>
</div>

and at the end we have custom HTML modules in tab1 to tab4 position holding content for each tab. You can use other module positions to make same thing.

Please Log in to join the conversation.

entourage
Inactive member
Topic Author
New Member

11 years 6 months ago #30100 by entourage

Replied by entourage on topic Tabs for menu section

Thank you for your reply but I still have some questions.

The tabs are vertical not horizontal. Is there away to have them span horizontally and use the h3 for the title of the tab?

On the events page. I changed the image but now it does not take up 100% width. Also used double column but the height of the page is much shorter and the text moves down past the image.

Any help would be much appreciated.
Chris

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

11 years 6 months ago #30107 by ivan.milic

Replied by ivan.milic on topic Tabs for menu section

Add this css extracted from one page to layout.css:

Code:

/* tabs styling */

ul.ui-tabs-nav {
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	margin:0;
	padding:20px 0;
	list-style: none;
}

ul.ui-tabs-nav li {
	width: 24%;
	min-width: 150px;
	display: inline-block;
	text-align: center;
}

ul.ui-tabs-nav li a {
	border-left: 1px solid #ddd;
	display: block;
	text-decoration: none;
	color:inherit;
}

ul.ui-tabs-nav li a:focus {
	outline:none;
}

ul.ui-tabs-nav li:first-child a {
	border-left: none;
}

ul.ui-tabs-nav .bigtext {
	line-height: normal;
}

div.ui-tabs-panel {
	margin-top: 30px;
}

.ui-tabs-active .bigtext {
	color:#222;
}

ul.ui-tabs-nav li img {
	opacity:.3;
}

ul.ui-tabs-nav li.ui-tabs-active img {
	opacity: 1;
}

NOTE - we can not log in to your back-end for thing like this where you want to create something not included in template.

Please Log in to join the conversation.

entourage
Inactive member
Topic Author
New Member

11 years 6 months ago #30119 by entourage

Replied by entourage on topic Tabs for menu section

I added the tabs styling to the layout.css. It looks the same. Could I be missing anything?

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

11 years 6 months ago #30125 by ivan.milic

Replied by ivan.milic on topic Tabs for menu section

You can compare styling from one page demo and your site using chrome "Inspect Element"

Please Log in to join the conversation.

Time to create page: 0.091 seconds