Get parent pages in list and children in span for subnavigation

  • Resolved seborgarsen

    (@seborgarsen)


    14 years, 11 months ago

    <ul id="topnav">
    <li><a href="#">Link</a></li>
    <li>
        <a href="#">Link</a>
        <!--Subnav Starts Here-->
        <span>
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a>
        </span>
        <!--Subnav Ends Here-->
    </li>
    <li><a href="#">Link</a></li>
</ul>

    I’ve read the codec pages and I don’t want to use a plugin if avoidable.

Viewing 13 replies - 1 through 13 (of 13 total)

  • Have you read about wp-list-pages?

    Are the children sub-pages of the main pages?

    Thread Starter seborgarsen

    (@seborgarsen)

    Thanks,

    I’ve read it and can’t seem to find the answer. And yes, the subpages are direct children of the main pages.

    Also, how do we remove the autogenerated classeS?

    All list items (li) generated by wp_list_pages() are marked with the class page_item. When wp_list_pages() is called while displaying a Page, the list item for that Page is given the additional class current_page_item.

    ie. <li class="page_item page-item-903"> which is ugly and superfluous for my use.

    Thanks for replying so fast.

    Heh I know, i’m not sure if we can remove them tbh, maybe somebody can offer advice on this..

    What HTML does it output if you just use wp_list_pages(); ??

    I think you might have to create function to change it’s HTML to use spans..

    Thread Starter seborgarsen

    (@seborgarsen)

    I get the usual output

      and

    • I tried going through post-template but I am not sharp enough in php to see where wp_list_pages generates for children.

    Thread Starter seborgarsen

    (@seborgarsen)

    oops <ul> and <li> hehe

    If you just use wp_list_pages(); does this not suffice for what you want? If not what changes would you like to make to it?

    Thread Starter seborgarsen

    (@seborgarsen)

    the thing is I want the children to be in span like this:

    <li>
        <a href="#">Link</a>
        <!--Subnav Starts Here-->
        <span>
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a>
        </span>
        <!--Subnav Ends Here-->
    </li>

    The current output does provide enough to style it how you want in CSS..

    If you really wanted the SPANS, we could get the wp_list_pages output and modify it, the only problem is we need to find a way to check if a link is a sub-page… then we can use a str_replace to change the li into a span, only if it is a subpage..

    Thread Starter seborgarsen

    (@seborgarsen)

    Interesting, specifically I want this

    https://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/

    Thread Starter seborgarsen

    (@seborgarsen)

    I recon this could be done with jQuery to replace html on the fly, but I am unsure of just how.

    Thread Starter seborgarsen

    (@seborgarsen)

    here we are: https://www.pastie.org/630365

    thanks for the input, xdesi. Namaste! ??

    Hi Seborgarsen,

    I want to use the same menu. I used your code from pastie.org but te code does not change the li’s to span.

    I also tested another jquery code and that worked fine.

    Here’s my html file, can you (or someone else) see what’s wrong?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Untitled</title>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<<script type="text/javascript">
//NAV MANIPULATION
  var tNav = "ul#topnav > li";
  var menuLength = $('#topnav').children().size();
      //finds the second level ul and replaces with span

    for (i = 0; i < menuLength; i++) {
      $("#topnav > li:eq(" + i + ")").find("ul").replaceWith("<span>" + $(tNav).find("ul").html() + "</span>");

            $("#topnav > li:eq(" + i + ") > span").find("li").each(function(){
                      $(this).replaceWith(" " + $(this).html() + " ");
                      });
    };
</script>

</head>
<body>
        <ul id="topnav">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a>
                <ul>
                    <li><a href="#">2a</a></li>
                    <li><a href="#">2b</a></li>
                    <li><a href="#">2c</a></li>
                    <li><a href="#">2d</a></li>
                    <li><a href="#">2e</a></li>
                </ul>
            </li>
            <li><a href="#">3</a>
              <ul>
                    <li><a href="#">3a</a></li>
                    <li><a href="#">3c</a></li>
                </ul>
            </li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>

        </ul>
</body>
</html>

    Thanks!!!

    I solved it, used

    <script type="text/javascript">
$(document).ready(function(){
    // YOUR JQUERY SCRIPTS HERE
});
</script>

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Get parent pages in list and children in span for subnavigation’ is closed to new replies.