I have the following Menu Structure
Books [/books]
New Books [/books/new-books]
Fiction [/books/new-books/fiction]
Sci Fi[/books/new-books/sci-fi]
The Books Menu has Books (the Menu itself) as the first level, New books as the second level and Fiction and Sci Fi as the third level.
What I am trying to achieve is the following. Essentially the url structure for the 'Sci Fi' Menu Item remains the same but visually, it sits under Fiction.
Books [/books]
New Books [/books/new-books]
Fiction [/books/new-books/fiction]
Sci Fi[/books/new-books/sci-fi]
There were two ways I thought I might (a big might at that) be able to achieve this but both seems like a very 'ugly' way to go about doing it but I can't think of any other way I could achieve this.
Method 1: Created a content plugin to which will check a pre-defined class name on the of the menu list item -> get the parent li -> remove all such menu items and put it under another predefined parent item.
Method 2: Using jQuery get all the list items with a defined class (in the jsfiddle "fourth-menu"), remove it from their existing position and add it to the pre-defined parent (using class/id on the menu item href).
As I mentioned before both method sounds very convoluated so I was wondering if there was a better way to achieve this?
I have created a jsfiddle which makes it a bit more clear as to what I am trying to achieve.