How to edit category navigation design in magento

Question

I am trying to add '+' Symball in front of category navigation on left side I am using magento 1.9.x

This code i fount in category-navigation.phtml

I want to know how <?php echo $_menu ?> this comes from?

<div class="block vertical-menu">   
        <div class="title-block" style="margin-bottom:0px;"><h4><?php echo $this->__($title) ?></h4></div>  
        <div class="block-content">
            <ul id="content-navigation">
                <?php echo $_menu ?>
            </ul>
        </div>
    </div>

Answer 1

My suggestion would be to do it in CSS. You can use Ionicons or something similar.

The $_menu html is generated inside the block class, rather than using a phtml file. So, you could extend that block and customize it, but this can also be achieved using CSS without having to worry about extending the block.

An example would be the following:

Example HTML

<nav id="nav">
    <ol>
        <li>Plus Sign</li>
        <li class="active">Minus Sign</li>
    </ol>
</nav>

Example CSS - This requires Ionicons

ol {
    list-style: none;
}

#nav li::before {
    font-family: Ionicons;
    content: '\f489';
    padding-right: 10px;
}

#nav li.active::before {
    content: '\f209';
}

JS Fiddle - A working sample

https://jsfiddle.net/adpro/5xbw80b1/