WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Assign CSS ID to submenu (5 posts)

  1. MrSister
    Member
    Posted 3 years ago #

    Hi!

    With minor experience in coding, I have managed to create a navbar, and placed it in my header. It is a horizontal list that makes tabs. See code:

    <li<?php
    				if (is_page('ipod-och-itunes'))
    				{
    				echo " id=\"active\"";
    				}
    				?>><a>/ipod-och-itunes">iPod och iTunes</a>

    I assign a ID of "active" if e tab is chosen. So far som good. My challenge is to assign a ID to the sublevel menu. Se sublevel menu is created by the following code:

    <?php
    
    // subpage has been selected
    if ($post->post_parent)
    {
    	// show children of selected page
    	$children = wp_list_pages('title_li=&child_of='.$post->post_parent.'&echo=0&depth=1');
    }
    // parent page has been selected
    // check if there are any child pages
    else
    {
    	// show children of current parent page
    	$children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0&depth=1');
    }
    
    // if there are subpages, print them
    if ($children) {
    
    ?>
    <div id="submenu-wrapper">
    	<div id="navlist">
    		<ul id="subnavlist">
    		   <?php echo $children ?>
    
    	</div><!-- subnavlist -->
    </div><!-- submenu-wrapper-->

    So, how do I assign a ID of 'subactive' to a child if the child exists, and is chosen?
    My ambition is to have the sam functionality as the menu in The wallstreet journal, that highlights both the parent and the child, if child is chosen.
    To add on to the challenge, it would be nice i I could assign different ID's to children. That is only to be able to adjust the leftmargin to align the submenu directly under the chosen parent/tab.

    Any suggestions? Or am I unclear in any way?

  2. MrSister
    Member
    Posted 3 years ago #

    *Bump*

    Am I unclear?

    Would appreciate help :-)

  3. MrSister
    Member
    Posted 3 years ago #

    *Bump again*

    Is there someone that can help? All I wanna do is to assign CSS id="subactive" to a submenu (child) if the child is current.

    To me it seems that the problem is in me echo'ing all the children in all together (se `<?php echo $children ?>
    `)
    I think i need something like:
    If post_id of specific child is chosen, then echo id="subactive" on that specific child. (in order to highlight the tab in the menu).

    Would appreciate help.

  4. MrSister
    Member
    Posted 3 years ago #

    Since there were thin response on the matter in question, I changed approach.

    Now I generate my menu with flexi-pages. I created a widget-area within the functions.php-page. I paste code if someone needs a hand with that.

    if ( function_exists('register_sidebar') ) {
    	register_sidebar(array(
    		'before_widget' => '<li id="%1$s" class="widget %2$s">',
    		'after_widget' => '</li>',
    		'before_title' => '<h2 class="widgettitle">',
    		'after_title' => '</h2>',
    	));//My own widget-area is created with code from register_sidebar underneath, and stops at ));
    	register_sidebar( array (
    	  'name' => 'Header Widget Area',
    	  'id' => 'header-widget-area',
    	  'before_widget' => '<li id="navlist" class="widget-container %2$s">',
    	  'after_widget' => "</li>",
    	   'before_title' => '<h5>',
    	   'after_title' => '</h5>',
    	  ) );}

    With this done, the new widget-area should appear in your admin-area (where you drag and drop your widgets today).

    But still, it does not show up anywhere in your WP, for your visitors to see i meen. It's all backoffice til you call upon it.

    I call upon my widget-area in my header, since it gonna be my menu. I do it like this:

    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget Area')) : ?>">
    				[ do default stuff if no widgets ]
    				<?php endif; ?>

    And here is a larger peace of code, to show how the call-function operates. Just copy/paste.

    <div class="description"><?php bloginfo('description'); ?></div>
    		<div id="navcontainer">
    			<ul id="navlist">
    				<a href="<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget Area')) : ?>">
    				[ do default stuff if no widgets ]
    				<?php endif; ?></a>
    			</ul><!-- navlist -->
    </div><!-- navcontainer -->

    So, now You should be able to drag and drop any widget to you area, and it should appear in your header, or where you choosed to paste the <?php if (!function_exists...

  5. MrSister
    Member
    Posted 3 years ago #

    Ok... I'm on my own here. But I did solve it, even if it I got no help.

    For you guys who wants a menu where both parent and child (two levels) is highlighted, so your visitors to understand under what page they are, here's the solution.

    I create my menu in my header.php by a list. It looks like this...

    <ul id="navlist">
    			<li<?php
    				if (is_home())
    				{
    				echo " id=\"active\"";
    				}
    				?>><a href="<?php bloginfo('url') ?>">Home</a></li>
    			<li<?php
    				if (is_page('betalning'))
    				{
    				echo " id=\"active\"";
    				}
    				?>><a href="<?php bloginfo('url') ?>/pagenr2">Page nr2</a></li></ul>

    That creates m main nav bar. As you can see, i echo the id=active, so I can style it in the CSS.
    Now it's time to define the children/subpages. It's the same code I just earlier in my attemts.

    <?php
    if ($post->post_parent)
    {
    	$children = wp_list_pages('title_li=&child_of='.$post->post_parent.'&echo=0&depth=1');
    }
    else
    {
    	$children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0&depth=1');
    }
    if ($children) {
    ?>

    As You can see, we define the children as $children, som now all we gotta do is to echo our children (if the parent have subpages).

    <ul id="subnavlist">
      <li><?php echo $children ?></li>
     </ul>

    Now, with my css, I style the id="active" as

    li#active a	{
    	background-color: #fc9;
    	color:	#000;
    }

    The children gets a class of current_page_item automaticly by WP, so I just style that class with li.current_page_item a and li.current_page_item a:hover

    Over and out!

Topic Closed

This topic has been closed to new replies.

About this Topic