Forums

WordPress › Support » How-To and Troubleshooting

[resolved] Get parent pages in list and children in span for subnavigation (14 posts)

  1. seborgarsen
    Member
    Posted 2 years 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.

  2. xdesi
    Member
    Posted 2 years ago #

    Have you read about wp-list-pages?

    Are the children sub-pages of the main pages?

  3. seborgarsen
    Member
    Posted 2 years ago #

    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.

  4. xdesi
    Member
    Posted 2 years ago #

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

  5. seborgarsen
    Member
    Posted 2 years ago #

    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.

  6. seborgarsen
    Member
    Posted 2 years ago #

    oops <ul> and <li> hehe

  7. xdesi
    Member
    Posted 2 years ago #

    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?

  8. seborgarsen
    Member
    Posted 2 years ago #

    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>

  9. xdesi
    Member
    Posted 2 years ago #

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

  10. seborgarsen
    Member
    Posted 2 years ago #

    Interesting, specifically I want this

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

  11. seborgarsen
    Member
    Posted 2 years ago #

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

  12. seborgarsen
    Member
    Posted 2 years ago #

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

    thanks for the input, xdesi. Namaste! :-)

  13. Z500
    Member
    Posted 1 year ago #

    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"
        "http://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='http://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!!!

  14. Z500
    Member
    Posted 1 year ago #

    I solved it, used

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags