Menu icon Foundation

Coder | Qingdao

I am a designer, a coder and a little bit programmer. I know some php. I am yet to go deeper into php

www.seekout.us

My Posts

My Comments

Kumi Festus commented on Imri Persiado's post over 3 years

@Imri,
Using Foundation with or without php is not different from creating any site with html/css. If you downloaded the entire Foundation setup which has the folder name Foundation, you can see that in the folder, there is a default page called index.html.
You can change that to index.php so that you can insert php code into it.I think it's not advisable to have the index.php file in a folder which is also in another folder,like RootFolder/anotherFolder/index.php The best practice should be
RootFolder/index.php/pages or RootFolder/index.php/folder(s)/pages
 

Helpful 0
Kumi Festus commented on James Stone's post over 3 years

Hi James,
I have a problem with the dropdown menu. I hope you  can help me.
I had a tough time trying to center menu in a div container. I did it finally, I'm not sure if that is the best way. Now I have another hurdle displaying the dropdown menu as inline-block or table.
Here is the entire code.
<html>
<head>
<!--foundation styles-->

<style type="text/css">
.custom-menu{
display:inline-block;
}
</style>
</head>
<body>
<div class="row text-center">
<ul class="dropdown menu" data-dropdown-menu>
<li><a href="#">Item One</a>
<ul class="menu">

<!-- I want to display the lists here as inline-block-->
<li><a href="#">Item One A</a></li>
<!--more Links-->
</ul>
</li>
<li><a href="#">Item Two</a></li>
</ul>
</div>
<!--foundation scripts-->
</body>
</html>

Helpful 0
Kumi Festus commented on Ricardo Guinody's post over 3 years

Try this and see:

<html>
<head>
<!--insert necessary styles here-->
<!---it's better to insert the script on a separate file and link to the page-->
<script type="text/javascript">
var target = document.getElementById("all-tabs");
var options = {}; //Define options e.g. "option1" : "value1", etc.

var elem = new Foundation.Tabs($(target), options);

$('.tabs-title').on("mouseover", function() {
//Find the associated panel id.
var panelId = $(this).find("a").attr("href").substring(1);
var tabContents = document.getElementById(panelId);
//Use the "tabs" object to select the associated panel.
elem.selectTab($(tabContents));
//Show the tab contents.
$(tabContents).show();
}).on("mouseout", function() {
var panelId = $(this).find("a").attr("href").substring(1);
$(this).find("a").attr("aria-selected", "false");
var tabContents = document.getElementById(panelId);
//Hide the tab contents.
$(tabContents).hide();
});
</script>
<style>
.content {
display: none;
}

</style>
</head>

<body>
<ul class="tabs" data-tabs id="all-tabs">
<li class="tabs-title"><a href="#panel1">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2">Tab 2</a></li>
<li class="tabs-title"><a href="#panel3">Tab 3</a></li>
<li class="tabs-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content">
<div class="content" id="panel1">
<div class="text-center">
<p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
</div>
</div>
<div class="content" id="panel2">
<div class="text-center">
<p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
</div>
</div>
<div class="content" id="panel3">
<div class="text-center">
<p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
</div>
</div>
<div class="content" id="panel4">
<div class="text-center">
<p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
</div>
</div>
</div>
<!--necessary scripts here-->
</body>
</html>
 

Helpful 0
Kumi Festus commented on Kumi Festus's post over 3 years

@Magda Jans;
You used Foundation to create Wordpress theme?
I have one here http://codinginstitution.com/

Helpful 0
Kumi Festus commented on Kumi Festus's post over 3 years

 I think I will go with your way. I want the display like yours.
Thanks for your help

Helpful 0
Kumi Festus commented on Kumi Festus's post over 3 years

@Magda Jans,
I have a dropdown menu. I want the lists in the dropdown to display as inline-block(horizontal), not vertical. It seems the menu class has a restricted default width which can't be altered.
I tried to use a table to display the lists. That didn't work either. The width of table cells are also controlled. Cannot alter. I am creating a theme for OSCLASS classifieds site. I need the sub-categories to display inline. For now they can only display vertical.The sub-categories are many which means it's not advisable to display vertically.
See my code below
 
<ul class="dropdown menu" data-dropdown-menu">
<li><a href="">Item One</a>
<ul class="menu" <!--I want the lists here to display as inline-block-->>
<li><a href="">Item One A</a></li>
<!---More Lists-->
<ul>
</li>
<li><a href="">Item Two</a>
<ul class="menu">
<li><a href="">Item Two A</li>
</ul>
</li>
</ul>

See what I did later
<ul class="dropdown menu" data-dropdown-menu">
<li><a href="">Item One</a>
<ul class="menu">
<table>
<tr>
<td><a href="">Item One A</a></td>
<td><a href="">Item One B</a></td>
<td><a href="">Item One C</a></td>
</tr>
<tr>
<td><a href="">Item One D</a></td>
<td><a href="">Item One E</a></td>
<td><a href="">Item One F</a></td>
</tr>
<tr>
<td><a href="">Item One G</a></td>
<td><a href="">Item One H</a></td>
<td><a href="">Item One I</a></td>
</tr>
</table>
</ul>
</li>
<li><a href="">Item Two</a>
<ul class="menu">
<li>
<table>
<tr>
<td><a href="">Item One A</a></td>
<td><a href="">Item One B</a></td>
<td><a href="">Item One C</a></td>
</tr>
<tr>
<td><a href="">Item One D</a></td>
<td><a href="">Item One E</a></td>
<td><a href="">Item One F</a></td>
</tr>
<tr>
<td><a href="">Item One G</a></td>
<td><a href="">Item One H</a></td>
<td><a href="">Item One I</a></td>
</tr>
</table>
</li>
</ul>
</li>
</ul>

Helpful 0
Kumi Festus commented on Kumi Festus's post over 3 years

Hi,
That didn't work. Look at the screenshot below.You will see that the menu has shifted to the left side. I also want the dropdown menu to display as inline-block but that also doesn't work.

<html>
<head>
<style type="text/css">
#dropdown_list{
list-style:none;
display:inline-block;
}
</style>
</head>
<div class="row column menu-centered">
<div>
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a href="#">For Sale</a>
<ul class="menu" id="dropdown_list">
<li><a href="#">Item 1A</a></li>
<li><a href="">Item 1B</a></li>
<li><a href="">Item 1C</a></li>
</ul>
</li>
<li><a href="#">Vehicles</a>
<ul class="menu" id="dropdown_list">
<li><a href="">Used Cars</a></li>
</ul>
</li>
<li><a href="#">Classes</a></li>
<li><a href="#">Real Estate</a></li>
<li><a href="#">Sevices</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Personals</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</div>
</div>
</html>

Helpful 0
Kumi Festus commented on Kumi Festus's post over 3 years

Thumbs up buddy! It works like a charm. My eyes must have over-passed it. Jah bless you.

Helpful 0
Kumi Festus commented on Kumi Festus's post over 3 years

Yes,
Thanks a lot

Helpful 0
Kumi Festus commented on Kumi Festus's post over 3 years

I understand you perfectly. In effect, you're saying that Foundation has included almost all the JQueryUI functions. I just need to invoke them in my site.

If I'm right.

Helpful 0

Posts Followed

Following

Followers

My Posts

My Comments

You commented on Imri Persiado's post over 3 years

@Imri,
Using Foundation with or without php is not different from creating any site with html/css. If you downloaded the entire Foundation setup which has the folder name Foundation, you can see that in the folder, there is a default page called index.html.
You can change that to index.php so that you can insert php code into it.I think it's not advisable to have the index.php file in a folder which is also in another folder,like RootFolder/anotherFolder/index.php The best practice should be
RootFolder/index.php/pages or RootFolder/index.php/folder(s)/pages
 

Helpful 0
You commented on James Stone's post over 3 years

Hi James,
I have a problem with the dropdown menu. I hope you  can help me.
I had a tough time trying to center menu in a div container. I did it finally, I'm not sure if that is the best way. Now I have another hurdle displaying the dropdown menu as inline-block or table.
Here is the entire code.
<html>
<head>
<!--foundation styles-->

<style type="text/css">
.custom-menu{
display:inline-block;
}
</style>
</head>
<body>
<div class="row text-center">
<ul class="dropdown menu" data-dropdown-menu>
<li><a href="#">Item One</a>
<ul class="menu">

<!-- I want to display the lists here as inline-block-->
<li><a href="#">Item One A</a></li>
<!--more Links-->
</ul>
</li>
<li><a href="#">Item Two</a></li>
</ul>
</div>
<!--foundation scripts-->
</body>
</html>

Helpful 0
You commented on Ricardo Guinody's post over 3 years

Try this and see:

<html>
<head>
<!--insert necessary styles here-->
<!---it's better to insert the script on a separate file and link to the page-->
<script type="text/javascript">
var target = document.getElementById("all-tabs");
var options = {}; //Define options e.g. "option1" : "value1", etc.

var elem = new Foundation.Tabs($(target), options);

$('.tabs-title').on("mouseover", function() {
//Find the associated panel id.
var panelId = $(this).find("a").attr("href").substring(1);
var tabContents = document.getElementById(panelId);
//Use the "tabs" object to select the associated panel.
elem.selectTab($(tabContents));
//Show the tab contents.
$(tabContents).show();
}).on("mouseout", function() {
var panelId = $(this).find("a").attr("href").substring(1);
$(this).find("a").attr("aria-selected", "false");
var tabContents = document.getElementById(panelId);
//Hide the tab contents.
$(tabContents).hide();
});
</script>
<style>
.content {
display: none;
}

</style>
</head>

<body>
<ul class="tabs" data-tabs id="all-tabs">
<li class="tabs-title"><a href="#panel1">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2">Tab 2</a></li>
<li class="tabs-title"><a href="#panel3">Tab 3</a></li>
<li class="tabs-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content">
<div class="content" id="panel1">
<div class="text-center">
<p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
</div>
</div>
<div class="content" id="panel2">
<div class="text-center">
<p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
</div>
</div>
<div class="content" id="panel3">
<div class="text-center">
<p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
</div>
</div>
<div class="content" id="panel4">
<div class="text-center">
<p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
</div>
</div>
</div>
<!--necessary scripts here-->
</body>
</html>
 

Helpful 0
You commented on Kumi Festus's post over 3 years

@Magda Jans;
You used Foundation to create Wordpress theme?
I have one here http://codinginstitution.com/

Helpful 0
You commented on Kumi Festus's post over 3 years

 I think I will go with your way. I want the display like yours.
Thanks for your help

Helpful 0
You commented on Kumi Festus's post over 3 years

@Magda Jans,
I have a dropdown menu. I want the lists in the dropdown to display as inline-block(horizontal), not vertical. It seems the menu class has a restricted default width which can't be altered.
I tried to use a table to display the lists. That didn't work either. The width of table cells are also controlled. Cannot alter. I am creating a theme for OSCLASS classifieds site. I need the sub-categories to display inline. For now they can only display vertical.The sub-categories are many which means it's not advisable to display vertically.
See my code below
 
<ul class="dropdown menu" data-dropdown-menu">
<li><a href="">Item One</a>
<ul class="menu" <!--I want the lists here to display as inline-block-->>
<li><a href="">Item One A</a></li>
<!---More Lists-->
<ul>
</li>
<li><a href="">Item Two</a>
<ul class="menu">
<li><a href="">Item Two A</li>
</ul>
</li>
</ul>

See what I did later
<ul class="dropdown menu" data-dropdown-menu">
<li><a href="">Item One</a>
<ul class="menu">
<table>
<tr>
<td><a href="">Item One A</a></td>
<td><a href="">Item One B</a></td>
<td><a href="">Item One C</a></td>
</tr>
<tr>
<td><a href="">Item One D</a></td>
<td><a href="">Item One E</a></td>
<td><a href="">Item One F</a></td>
</tr>
<tr>
<td><a href="">Item One G</a></td>
<td><a href="">Item One H</a></td>
<td><a href="">Item One I</a></td>
</tr>
</table>
</ul>
</li>
<li><a href="">Item Two</a>
<ul class="menu">
<li>
<table>
<tr>
<td><a href="">Item One A</a></td>
<td><a href="">Item One B</a></td>
<td><a href="">Item One C</a></td>
</tr>
<tr>
<td><a href="">Item One D</a></td>
<td><a href="">Item One E</a></td>
<td><a href="">Item One F</a></td>
</tr>
<tr>
<td><a href="">Item One G</a></td>
<td><a href="">Item One H</a></td>
<td><a href="">Item One I</a></td>
</tr>
</table>
</li>
</ul>
</li>
</ul>

Helpful 0
You commented on Kumi Festus's post over 3 years

Hi,
That didn't work. Look at the screenshot below.You will see that the menu has shifted to the left side. I also want the dropdown menu to display as inline-block but that also doesn't work.

<html>
<head>
<style type="text/css">
#dropdown_list{
list-style:none;
display:inline-block;
}
</style>
</head>
<div class="row column menu-centered">
<div>
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a href="#">For Sale</a>
<ul class="menu" id="dropdown_list">
<li><a href="#">Item 1A</a></li>
<li><a href="">Item 1B</a></li>
<li><a href="">Item 1C</a></li>
</ul>
</li>
<li><a href="#">Vehicles</a>
<ul class="menu" id="dropdown_list">
<li><a href="">Used Cars</a></li>
</ul>
</li>
<li><a href="#">Classes</a></li>
<li><a href="#">Real Estate</a></li>
<li><a href="#">Sevices</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Personals</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</div>
</div>
</html>

Helpful 0
You commented on Kumi Festus's post over 3 years

Thumbs up buddy! It works like a charm. My eyes must have over-passed it. Jah bless you.

Helpful 0
You commented on Kumi Festus's post over 3 years

Yes,
Thanks a lot

Helpful 0
You commented on Kumi Festus's post over 3 years

I understand you perfectly. In effect, you're saying that Foundation has included almost all the JQueryUI functions. I just need to invoke them in my site.

If I'm right.

Helpful 0

Posts Followed

Following

Followers

Register Today

Get all the answers in our
Foundation Classes

Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.

See Upcomming Classes

Or if you prefer, contact the Foundation Team at training@zurb.com or (408) 341-0600 x635