I would like to have a vertical navigation menu compatibbel with jQuery UI ThemeRoller.
How can I define the styles for my menu?
I just build menus dynamically and php code is following:
$menu = '<ul>';
foreach ($items as $val) {
if ( 'sep' == $val['link'] )
$menu.=$val['label'].'<br>';
else {
// echo $_SERVER['SCRIPT_FILENAME']."<br>".DEF_PATH.$val['link'];
if ($_SERVER['SCRIPT_FILENAME'] == DEF_PATH.$val['link']) {
$menu .= '<li class="current"><a href="'.$val['link'].'"';
$menu .= ' class="current"';
}else
$menu .= '<li><a href="'.$val['link'].'"';
$menu .= ' target="'.$val['target'].'" '.'>'.$val['label']."</a></li>\n";
}
}
$menu.="</ul>\n";
$main_menu.=$menu;
thanks Arman.
jQuery UI Uses "CSS Framework", you can read about it here. Basically it uses a well defined set of classes for specific things, just use the appropriate classes include the theme/CSS you want to use and you're done :)
For a menu you probably want to start with the Interaction States classes section. For example instead of this:
<li class="current">
You would probably want ui-state-active or ui-state-highlight either replacing or in addition to current (in addition if .current has additional style rules you want), like this:
<li class="current ui-state-active">
Try adding display:block to them (UI might have made them inline):
$menu .= '<li style="display:block;"><a href="'.$val['link'].'"';
Related
I have a function called 'kmenu'
function kmenu()
{
if (isset($_GET['pid'])) {
$pid = $_GET['pid'];
} else {
$pid = 1;
}
$menu = '<ul class="nav navbar-nav">
<li class="active">HOME <span class="sr-only">(current)</span></li>
<li>ABOUT US</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false">OUR PRODUCTS<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Arabic Sweets</li>
<li>Cakes</li>
<li>Bakery</li>
<li>Chocolate</li>
<li>Confectionery</li>
<li>Ice Cream</li>
<li>Malaga</li>
</ul>
</li>
<li>OUR BRANCHES</li>
<li>GALLERY</li>
<li>CONTACT US</li>
</ul>';
return $menu;
}
this function content all the menu items as shown above.
I need to add the class='active' to the current page.
I used to make it like this before
if($pid==1){echo 'class="active"'} but when I try to use functions to store the menu how can I do this now.
OK. At first You can do something like this:
$menu = 'MENU';
$menu = $menu.'SOMETHINGELSE';
print_r($menu); // or return $menu;
In that case it will print / return "MENUSOMETHINGELSE". This is string concatenation. So You can do simple if (as You said you make it before), and write:
$menu = '';
$menu .= 'BEGINNING OF THE HTML';
if($pid==1) {
$menu .= 'class="active"';
}
$menu .= 'REST OF HTML';
Few more words:
But this is not everything. Storing menu in a variable looks really bad. Also outputing HTML like that too. You should try to save only important value in array, and then return / echo menu in loop. For example:
$menu = array(
[0] => array('name' => 'NAME0', 'title' => 'TITLE0', 'url' = '/url0'),
[1] => array('name' => 'NAME1', 'title' => 'TITLE1', 'url' = '/url1')
);
Then generate menu:
foreach ($menu as $m) {
echo ''.$m['name'].'';
}
In that case, visual settings are in foreach loop, and menu semantic in simple array. You can store active in that array too.
If You want, You can also take a look at ob_start functions, and use echo, and then return ob_get_contents(), if this is easier for You (http://php.net/manual/en/ref.outcontrol.php).
Remember that on every fragment of PHP code You can escape php.
<?php echo "ASD"; ?>
ASD
<?php echo "ASD"; ?>
This code will output three ASD. You should try to use this technique, and minimize echo ouput of Your application. You can also use it in loops:
<?php foreach ($menu as $m) { ?>
<a href="<?php echo $m['url']; ?>"
title="<?php echo $m['title']; ?>">
<?php echo $m['name']; ?>
</a>
<?php } ?>
I hope You get the idea. If there is much more constant html (as in Your example) this should be much more cleaner to output.
Another thing is storing the menu content inside a function. It is also not a good practice. You should try to switch to object programming style, and try to save this menu array in some sort of global / cache / another object.
In Your case, if someone needs to create two menus on the same site, each time he must call this function, and the whole menu variable is declared from the beginning. While it should be only accessible from the function.
If You dont need to make an object oriented application, or need an easier solution, it is much better to save $menu somewhere else (level higher), and pass it as an argument to for example menu_generator function.
In that case, $menu look like I described it, and You declare function like that:
function generate_menu_html($menu) {
// your menu generation function base on menu array
}
Hope it helps.
Best regards.
I think you shouldn't store html-code in a function. Normally you store these in seperate files and then inlude them.
for example:
require '/menu.php'
Then you would be able to add to each line
<li><?php if($pid == 1): ?> class='active'<?php endif; ?><a>...</a></li>
You can try something like this
$menu = '<ul class="nav navbar-nav">';
$menu .= '<li';
$menu .= ($pid==1)?' class="active"':'';
$menu .= '><a href="?pid=1">HOME ....REST OF THE CODES';
Currently, I have this working on my template.php
function systema_breadcrumb($variables) {
$breadcrumb = $variables['breadcrumb'];
$crumbs = null;
if (!empty($breadcrumb)) {
// Provide a navigational heading to give context for breadcrumb links to
// screen-reader users. Make the heading invisible with .element-invisible.
$crumbs .= '<ul class="breadcrumb">';
$array_size = count($breadcrumb);
$i = 0;
while ( $i < $array_size) {
$crumbs .= '<li>' . $breadcrumb[$i] . '</li>';
$i++;
}
$crumbs .= '<li><span>'. drupal_get_title() .'</span></li></ul>';
return $crumbs;
}
}
The output of this displays as Home > [Content Type] > [Page Title]
While this works fine, there is something missing here. The current URL structure I set this page to is mydomain.com/[content-type]/[field-value]/[title-slug]. The [field-value] is a field that I added when you create a content based on its type. It is using a select list based on taxonomy terms I created. Here's what I want:
Set the breadcrumbs based on the URL.
Display them as unordered list.
Set the last item as <span> instead of <a> tag.
The hierarchical approach works like this. My only problem with that is it is displaying as a div. I want to set them as unordered list. Can anyone help me modify this or does anyone have a better approach? Thanks!
Follow the example that you linked to however instead of the line:
return '<div class="breadcrumb">'. implode(' ยป ', $breadcrumb) .'</div>';
Put:
// wrap last array element in a span
end($breadcrumb);
$breadcrumb[key($breadcrumb)] = '<span>'.$breadcrumb[$key].'</span>';
// now loop each item and build a ul
$out = '<ul class="breadcrumb">';
foreach($breadcrumb as $item) {
$out .= '<li>'.$item.'</li>';
}
return $out .= '</ul>';
What i'm trying to do is quite simple as concept, but i'm not that good with php and the joomla framework.
Currently the home menu-item is generated like this:
<li class="item-101 current active">
<a class="hide-text" href="#some-link">Home</a>
</li>
What i'd like to achieve is to insert an <i> element inside only the home menu-item, something like this:
<li class="item-101 current active">
<a class="hide-text" href="#some-link"><i class="icon-home"></i>Home</a>
</li>
How can i achieve this? I'm using Joomla! 2.5 atm
I guess it's possible do something like "if this menu-item is the home link then add this code inside the <a> tags" but i really don't know how to do it, my php is not strong enough :P
Note: i'm doing this to achieve a simple home-icon instead of the litteral home menu-item.
As the classes syntax could suggest, i'm using the twitter bootstrap css-framework, but i've implemented the Icomoon font-set (as in joomla 3.0) instead of the tbs Glyph-icons sprites images.
Unfortunately, using font-based icons, text rules are applied to the icons also, and that is the reason i'm trying to insert a custom element inside the <a> tag, so that i can override the hide-text class hiding the home-icon.
Thanks for any suggestion!
Have a look in the template file of the menu module.
/modules/mod_menu/tmpl/default.php
The template builds the HTML for the menu module.
I just checked how it works in Joomla 2.5, and in the /modules/mod_menu/tmpl/default.php template the list is build. If you want to add to only the home link you'll have to add a little bit of code. Something like this :
if($item->home == '1'){ $item->title = '<i class="icon-home"></i>' . $item->title; };
Insert this just under the foreach loop and have a go, it should look something like this :
foreach ($list as $i => &$item) :
// THIS ADDS THE <i> to only the HOME LINK
if($item->home == '1'){ $item->title = '<i class="icon-home"></i>' . $item->title; };
$class = 'item-'.$item->id;
if ($item->id == $active_id) {
$class .= ' current';
}
Good Luck ;)
I have been following this guide as well, (Thanks Gruber and Mark Vink) but using the glyphicons instead of IcoMoon. I found there to be a syntax error in the example above. The version hat worked for me was
foreach ($list as $i => &$item) {
if($item->home == '1')$item->title = '<span class="glyphicon glyphicon-home" aria-hidden="true"></span>' .$item->title;
$class = 'item-' . $item->id
etc...
I use get_pages() to fetch the title and content of each of my top level pages and displays it on one page. Unfortunately it's stripping out all of my <p> tags and I'm not sure why. If the <p> tag has a style or class to it, it will keep it, but all normal <p> tags get stripped. Here is my code:
<?php
$pages = get_pages('parent=0');
foreach ($pages as $pagg) {
$option = '<div class="section">';
$option .= $pagg->post_title;
$option .= $pagg->post_content;
$option .= '</div>';
echo $option;
}
?>
EDIT:Alex was nice enough to provide the answer. The Solution below.
<?php
$pages = get_pages('parent=0');
foreach ($pages as $pagg) {
$option = '<div class="section">';
$option .= $pagg->post_title;
$option .= wpautop($pagg->post_content);
$option .= '</div>';
echo $option;
}
?>
You need to filter the content.
apply_filters('the_content', $pagg->post_content);
This will return formatted text, shortcodes that are processed and omebeds that work.
This would happen automatically if you called setup_postdata(), or used the content from the loop.
WordPress does not like p elements for some reason. Its WYSIWYG editor never (or rarely) inserts them.
Run the string through wpautop() to add the p elements.
Hi
I am going to highlight a menu item according to the page that is reading currently, when user click on different page through the menu, that menu item will be highlighted, example is http://templates.joomlart.com/ja_pyrite/index.php?option=com_content&view=article&id=44&Itemid=53.
If I use PHP/jQuery to check the url and highlight the menu, it will be good if the url look like "http://example.com/contact", but the example above is bad.
If I don't going to check the url and highlight the menu item, could someone give me a idea/method that can be done with the same effect?
Thank you
I found this on 960 Development, been googling for a while for this, so happy when I finally found it!
<ul class="sub-nav" >
<?php
$full_name = $_SERVER['PHP_SELF'];
$name_array = explode('/',$full_name);
$count = count($name_array);
$page_name = $name_array[$count-1];
?>
<li><a class="<?php echo ($page_name=='where-to-buy.php')?'active':'';?>" href="where-to-buy.php">WHERE TO BUY</a></li>
<li><a class="<?php echo ($page_name=='about.php')?'active':'';?>" href="about.php">ABOUT US</a></li>
<li><a class="<?php echo ($page_name=='contact.php')?'active':'';?>" href="contact.php">CONTACT US</a></li>
It is working fully for me, get the pages I need to be "active" to be active and dosent active any of thoes who got the class when I'm in another page!
Take a look at it!
Edit:
Even if you got a (in this example) contact.php?person=John, it will "active" the contact.php link!
do something like this
<div id="nav_menu">
<?php
$currentFile = $_SERVER['REQUEST_URI'];
$pages = array(
array("file" => "/index.php", "title" => "Home"),
array("file" => "/about.php", "title" => "About Us"),
array("file" => "/schedule.php", "title" => "Schedule")
);
$menuOutput = "<ul>";
foreach ($pages as $page) {
$activeAppend = ($page["file"] == $currentFile) ? " id='active' " : "class='nav_button'";
$currentAppend = ($page["file"] == $currentFile) ? " id='current' " : "class='nav_button'";
$menuOutput .= "<li " . $currentAppend . ">"
. "<a href='" . $page["file"] . "' id='".$page["id"]."'>" . $page["title"] ."</a>"
. "</li>";
}
$menuOutput .= "</ul>";
echo $menuOutput;
?>
</div>
i hope you get the idea, i had this on stackoverflow a while ago but i forgot what was the question
edit:
here i finnally found the original question
In the HTML code you use to generate your navigation, add some PHP logic that will add a selected class to the button of the page that you are currently on. Then just add some CSS for the selected class.
Can you do something like this? It should select any link that points at the current page - so you can apply whatever you like to highlight it.
$('a[href="'+window.location+'"]').addClass('menu-highlight');
A good technique is to add a specific class or id attribute to body element and then style it in CSS. It requires minimum of server side programming and keeps all the presentation logic in CSS as it should be done.
<style>
.contact #contact { background:#000; }
...
</style>
<body class="contact">
<ul>
<li id="homepage">Homepage</li>
...
<li id="contact">Contact</li>
</ul>
...