Autonav (automatic navigation)


#1

Maybe I have overlooked something, but I guess there is no way to build an automatic navigation in Pulse.

To explain what I mean: In many CM systems, you put a code, building block or whatever to the place where the navigation should appear. From that moment on, new pages appear in the navigation automatically. But the key point is, that the current page (the actual page where the user is on) is marked (in another color, bold or whatever is set in the CSS).

I could build this with PHP, like I did for a site without any CMS:

<?php
$requri = getenv(‘REQUEST_URI’);
$page = strtolower(basename($_SERVER[‘PHP_SELF’]));
if($page == “index.php”) {
$index = “nav-selected nav-path-selected”;
} else {
/* something default */
}
?>

<div class=“grid_12 navi”>
<ul class=“nav”>
<li class="<?php echo $index; ?>"><a href=“index.php” class="<?php echo $index; ?>">Start</a></li>
</ul>
</div>

But an automatic feature would spare a lot of time. And besides, I am not a programmer and my solution is possibly not the best.


#2

Thanks - for the backend yes, Pulse 5 will have navigation improvements such as re-ordering the navigation bar with drag and drop, instead of having to hand code it in a block. But that would still work if preferred.

As for the highlighting page in use on the frontend nav … @JRAYCV once did that (in JS I think) on the old forum. He might be able to share this solution with you :slight_smile:


#3

I’ve done this a few different ways in the past both with PHP (like your example), in JavaScript and more recently in CSS. What I tend to do is add a class style to the body tag that denotes the page we are on;

<body class="home">

Then my menu gets structured like this with a class for each link target;
`

`

Now finally my CSS styles would be;
body.home a.home, body.home a.work, body.home a.sleep { color:#f00; /* or whatever for my active links */ }

Here’s the PHP script I use to add the classes to the body tag. I hope this helps.


#4

@TimPlumb:
Ah, yes, I remember something I read in a CSS book (Little Boxes) some time ago. The soution was similar to yours, but without PHP, so you’d have to write a class name for the body and the navigation list on every page. That’s okay for small websites, but not for large ones with many pages. The CSS would be:

body.home a.home,
body.work a.work,
body.sleep a.sleep
{
color:#f00; /* or whatever for my active links */
}

So, I will try your solution, thanks for sharing!


#5

@pulsecms:
That sounds quite promising, I am looking forward to version 5.


#6

Hi @Torsten

Good Day :slight_smile:

If you mean adding active link for your navs I have used the below php:

css

a{
color:#fff;
}

a:hover,
a.active{
color:#f00;
}

<a href="/about" <?php if(basename($_SERVER['REQUEST_URI'])=="about"){echo "class='active'";}?>>ABOUT

<a href="/works" <?php if(basename($_SERVER['REQUEST_URI'])=="works" || strpos($_SERVER['REQUEST_URI'], 'work')){echo "class='active'";}?>>WORKS

Please let me know if this help or need more info or help.

@pulsecms sorry for the late reply :slight_smile:

Thanks and regards,

Justin


#7

Perfect Justin - that’s the one I was thinking :slight_smile:

And Tim’s CSS solution is also elegant for simple/small sites - I like just using CSS where possible :wink:


#8

Shouldn’t it be something like the following?

if (SERVER[‘REQUESTURI’]==“about”) { …

But my issue is: Every time my client creates new pages, I’d have to change the PHP code for the navigation. Actually what I am asking is: Almost all content management systems I know, even those without a database, offer an automatic navigation, which means that as soon as the user creates a new page. this page is shown in the navigation. I would like to find such a feature in Pulse also, if that’s not asking too much.


#9

Thanks @Torsten - as said above, you’ll have to wait for Pulse 5 :wink:


#10

Hi All,

I tried to make something out and I had made it work.

<style type="text/css">
	
		a{
			color:#000;
			padding:10px;
			margin:0 5px;
			font-size:14px;
			display:inline-block;
			text-decoration:none;
		}
	
		a:hover,
		a.active{
			color:red;
		}
	
	</style>

<?php 
    
    	$linkName =  basename($_SERVER['REQUEST_URI']); 
   	 	echo '<div id="mainNavs" data-link='.$linkName.'>';
    ?>
    
        <a href="/home">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
        
    <?php    
    	echo '</div>';
    ?>

<script>

	var mainNavs = document.getElementById("mainNavs"),
		anchors = mainNavs.getElementsByTagName("a"),
		origin = mainNavs.getAttribute("data-link");
	
	for(i=0; i < anchors.length;  i++){
	
			var href = anchors[i].getAttribute("href");
			
			if(href == origin){
				anchors[i].className = "active";
			}
	
	}
<script>

Thanks and regards,

Justin


#11

Hi All,

You can apply this to your layout.php below:

<?php 
    	$linkName =  basename($_SERVER['REQUEST_URI']); 
   	 	echo '<div id="nav" data-link='.$linkName.'>';
    ?>
		<?php include("content/blocks/sb_nav.txt"); ?>
        
	<?php    
    	echo '</div>';
    ?>

Then add the script below before </body>:

<script>

	var mainNavs = document.getElementById("nav"),
		anchors = mainNavs.getElementsByTagName("a"),
		origin = mainNavs.getAttribute("data-link");
	
	for(i=0; i < anchors.length;  i++){
	
			var href = anchors[i].getAttribute("href");
			
			if(href == origin){
				anchors[i].className = "active";
			}
	
	}

</script>

Be sure give style for you active nav like below:

	a{
			color:#000;
			padding:10px;
			margin:0 5px;
			font-size:14px;
			display:inline-block;
			text-decoration:none;
		}
	
		a:hover,
		a.active{
			color:red;
		}

Let me know if you need help or if you have comments or feedback.

Thanks and regards,

Justin


#12

Thank you, @JRAYCV, I will try your code.


#13

Thank you, Michael (@pulsecms), am looking forward to Pulse 5, I think it’s gonna be very nice. Already told my client, that there will possibly be an autonav in version 5.


#14

Ohhh… it’s possible. It may not fully automatic but definitely the client will be able to move items around in order


#15

As Justin I use the basename to set the active link. I also use the dirname to show or hide categories.
It works for me and I hope it helps.

[code]
a.active { color: red; }
li li { display: none; }
li.active li { display: block; }

<?php $file = basename($_SERVER["REQUEST_URI"]); $dir = dirname($_SERVER["REQUEST_URI"]); function act ($fd,$name) { if ($fd ==$name) { echo ' class="active"'; } } ?> [/code]

#16

I am certainly looking forward to some improvements in this area. At present if client wants to create a new page the process is still difficult compared to WordPress for instance.

  1. Create new block
  2. Create new page for block
  3. Create new menu item

However one of the great strengths of Pulse is its versatility and although we could have a system that added a top level menu item when a new page was created, how would it deal with sub menus like I have here for instance?

http://www.minervaconservation.com/houses/intro

On this site I have main menu and several other ones for houses, churches etc.

I also have a couple of WordPress sites with submenus, and context sensitive ones, and even on that it is not an easy task to add and edit menus. Although at least it can be done without having to deal with it at code level. Still tricky though.
On my Minerva site each page has reference to a particular SB_menu so I guess that a new page would have to have an automatic way to reference this as a template. So in fact the process would be quite different from what exists now.
We would need a new type of page creation process that used templates. Which may well be thinking about I reckon. That way we developers could create a bunch of these and let the client have at it.


#17

thanks for sharing that @jdloudon - and would like to see improvements in this area also :slight_smile:


#18

Pulse5 as auto-navigation included with drag+drop from the admin settings pane :slight_smile:


closed #19