Inserting code into menu

  • Resolved Wunsz

    (@wunsz)


    12 years, 7 months ago

    Hi!

    I’m actually editing the twenty eleven style to suit my needs, however I have a problem. I need to insert 2 divs before and after the
    <ul class=”children”> …

    Now it looks like

    <div class="menu">
<ul>
   <li class="page_item page-item-100 current_page_item">
      <a href="https://localhost/wordpress/?page_id=69">Menu</a>
      <ul class="children">
         <li class="page_item page-item-70">
             <a href="https://localhost/wordpress/?page_id=70">Sub</a>
         </li>
      </ul>
   </li>
</ul>
</div>

    And i want it to look like:

    <div class="menu">
<ul>
   <li class="page_item page-item-100 current_page_item">
      <a href="https://localhost/wordpress/?page_id=69">Menu</a>
      <ul class="children">
         <div id="before"/>
         <li class="page_item page-item-70">
             <a href="https://localhost/wordpress/?page_id=70">Sub 1</a>
         </li>
         <li class="page_item page-item-71">
             <a href="https://localhost/wordpress/?page_id=71">Sub 2</a>
         </li>
         <div id="after"/>
      </ul>
   </li>
</ul>
</div>

    I tried with custom walker but I believe that my knowledge in WP and PHP is quite inadequate to do that alone.

    Moreover I found theoretically easier method using .before() and .after() in jQuery but I can’t use them properly.

    <script>$(“???”).after(‘<div id=”after” />’);</script>

    I don’t really know what should I put where ??? are.

    Thank’s in advance!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    $('ul ul li').first().parent().prepend('<div id="before"/>);
$('ul ul li').last().append('<div id="after">');

    Not tested.

    Thread Starter Wunsz

    (@wunsz)

    Inserted this:

    <script>
	$('ul ul li').first().parent().prepend('<div id="before"/>');
	$('ul ul li').last().append('<div id="after"/>');
</script>

    Just after:

    <?php wp_nav_menu( array( 'theme_location' => 'primary') ); ?>

    However it seems not to work :/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Tested the first one to work with

    $('ul ul li').first().parent().prepend('<div id="before"/>');

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The other one should be

    $('ul ul li').last().parent().append('<div id="after"/>');

    Thread Starter Wunsz

    (@wunsz)

    Looks ok but I think that the code is not executing. How can i check that?
    Am I even properly placing it? (Just after the php script loading the menu).

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Have you jQuery defined?

    Thread Starter Wunsz

    (@wunsz)

    I think so. At least it is added

    <script src="https://localhost/wordpress/wp-includes/js/jquery/jquery.js?ver=1.7.1" type="text/javascript">

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m not sure what that file is for, but try putting this in the footer.php file, above the </body> element.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('ul ul li').first().parent().prepend('<div id="before"/>');
 $('ul ul li').last().parent().append('<div id="after"/>');
});
</script>

    If there is already a link or reference to a file containing these characters, ‘1.7.1/jquery.min.js’, your jQuery may break.

    Thread Starter Wunsz

    (@wunsz)

    Yay! Now the script works!

    But it when i have 2 slide down menu’s “before” is only in the first one and “after” is only in the last one. Is there a fix for that?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I assumed you only wanted jQuery to apply once through your ID <div id="before"/>; you’ll have to change this to a class.

    Try

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('ul ul li').each().first().parent().prepend('<div class="before"/>');
 $('ul ul li').each().last().parent().append('<div class="after"/>');
});
</script>

    Not tested.

    Thread Starter Wunsz

    (@wunsz)

    Yeah! Got it. This one is perfect:

    $('ul ul li').parent().prepend('<div id="before"/>');
 $('ul ul li').parent().append('<div id="after"/>');

    Thank you very much for your help!

    Edit. Yup thanks for the class ??

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Inserting code into menu’ is closed to new replies.