-2

I'm learning how PHP works, but at the same time I have to redesign an custom CMS.

CMS is written in PHP, I have restyled the default menu using CSS and added a side slide effect. But now, I need to keep this side panel opened, when I click on a link from the menu. I think, the easiest way is prevent page reload = to make menu links open in a page content section (<div id="content"></div>). But because in a source code, there are lots of functions, variables etc., I really need your help, how to proceed.

/Admin/index.php - content from menu sections (placed in separate files) is called here using a function

AdminLib/CSS/style.css - contains also styles for side menu

AdminLib/Include/menu.php - here is defined a side menu (ul, li)


/Admin/index.php

...
...
...
<body>
<?php if ($page != 'login') { 
    $menu_obj = new AdminMenu(dirname(__FILE__).'/Tabdefs/');

    echo $menu_obj->GetHtml();


?>
    <div class="site-wrap">
<?php
    }
    ContContent();
?>
    </div>
...
...
...

AdminLib/Include/menu.php

...
...
...
//vrati html pro svoje menu
public function GetHtml() {
$html = '<ul class="navigation">';

$html .= $this->GetHtmlRecursive($this->menu_def);
$html .= '</ul>';
$html .= '<input type="checkbox" id="nav-trigger" class="nav-trigger" /><label for="nav-trigger"></label>';

return $html;
}

/********** PRIVATE ***********/
//vrati html pro vsechny polozky menu v poli $arr; Pokud tam nejaka ma sub, tak se vola rekurzivne
private function GetHtmlRecursive($arr) {
    $html = '';
    foreach ($arr AS $item) {
        //neukazovane polozky rovnou preskakuju
        if ($item['show'] != 'Y')   
            continue;

    //ted jestli mam podpolozky, tak rekurzujeme    
    if (isset($item['sub'])) {
        $html .= '<li class="nav-item"><a href="#">'.$item['nazev'].'</a>'.
            '<ul class="nav-item">';
        $html .= $this->GetHtmlRecursive($item['sub']);
        $html .= '</ul></li>';
    }
    else {
         //pokud podpolozky nemam, tak vypisu normalni polozku
        $html .= '<li class="nav-item"><a href="'.$item['url'].'">'.$item['nazev'].'</a></li>';
    }
} //foreach pres polozky $arr

return $html;
}
...
...
...

I trying to integrate something like this - using jQuery script (How to target the href to div - 2nd and 3rd link on JsFiddle) into my source code, but I need help with realisation - I wasn't able to make it working.

0

1 Answer 1

1

Instead of getting the links to target specific divs, you could always use anchor tags. They use the a tag to go to the relevant point on a page.

An anchor tag would be created like the following:

<a name="location1"></a>

To link to that with your a tag, you can then do:

<a href="#location1">Link Text</a>

That link will then take you to the anchor location on the page.

If you really want to do it by div ID and use jQuery (which will enable you to scroll to it rather than a straight jump), then if you create your link to something like the following :

<a href="#" onclick="scrollToLocation('location1')">Link Text</a>

If the page then has the div:

<div id="location1">Contrent of the div</div>

and your page has the function (either on page or in an external file) :

function scrollToLocation(location_id) {
    $('body').animate({
        scrollTop: $('#' + location_id).offset().top
    }, 500);
}

There's more information on Stack Overflow in the following questions:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.