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

My Posts







My Comments

Kumi Festus commented on Imri Persiado's post 12 months

@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
 

Kumi Festus commented on James Stone's post about 1 year

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>

Kumi Festus commented on Ricardo Guinody's post about 1 year

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>
 

Kumi Festus commented on Kumi Festus's post about 1 year

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

Kumi Festus commented on Kumi Festus's post about 1 year

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

Kumi Festus commented on Kumi Festus's post about 1 year

@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>

Kumi Festus commented on Kumi Festus's post about 1 year

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>

Kumi Festus commented on Kumi Festus's post about 1 year

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

Kumi Festus commented on Kumi Festus's post about 1 year

Yes,
Thanks a lot

Kumi Festus commented on Kumi Festus's post about 1 year

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.

Posts Followed









Following

Followers

My Posts

My Comments

You commented on Imri Persiado's post 12 months

@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
 

You commented on James Stone's post about 1 year

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>

You commented on Ricardo Guinody's post about 1 year

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>
 

You commented on Kumi Festus's post about 1 year

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

You commented on Kumi Festus's post about 1 year

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

You commented on Kumi Festus's post about 1 year

@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>

You commented on Kumi Festus's post about 1 year

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>

You commented on Kumi Festus's post about 1 year

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

You commented on Kumi Festus's post about 1 year

Yes,
Thanks a lot

You commented on Kumi Festus's post about 1 year

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.

Posts Followed

Following

Followers

  • No Content