WordPress.org

Ready to get started?Download WordPress

Forums

Vertical Subnav Menu within Page (10 posts)

  1. JAYMICHAELIVING
    Member
    Posted 7 months ago #

    I am trying to add Vertical Subnav Menu within a Page that I created. When a #link it clicked in the subnav, the content is displayed to the right in the inner container.

    I've researched endlessly for this and cannot find a single solution on it. I am trying to add a vertical sub navigation menu in to one of my pages. I've coded it in JSFiddle and it works EXACTLY how I want it to, however, when I add the code to my WordPress theme, for some reason, it doesn't work.

    Here is my page: About Us Page
    Here is what I am trying to model it after: Example Page

    I've added the JavaScript code right above the <body> tag in the my header.php:

    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script type="text/javascript">
        jQuery('#tabs')
        .tabs()
        .addClass('ui-tabs-vertical ui-helper-clearfix');
    
    </script>

    And have added the following CSS to my Custom CSS:

    /*About Us—Menu*/
    .aboutnav a {
        display: block;
        font-size: 13px;
        font-weight: normal;
        margin: 0;
        padding: 0;
        color: #56004e;
        text-decoration: none;
        text-transform: uppercase;
        font-family: Oswald, arial, helevtica, sans-serif;
    }
    
    .aboutnav a:hover,
    .aboutnav li.current-menu-item a,
    .aboutnav li#current a,
    .aboutnav li.current-cat a,
    .aboutnav li.current_page_item a {
        text-decoration: none;
        color: #9D8197;
    }
    /*Vertical Line*/
    .verticalLine {
        border-left: solid 2px #9d8197;
    }
    /*Tabs*/
    .ui-tabs.ui-tabs-vertical {
        padding: 0;
        width: 42em;
    }
    .ui-tabs.ui-tabs-vertical .ui-widget-header {
        border: none;
    }
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav {
        float: left;
        width: 10em;
        background: #fff;
        border-right: 1px solid purple;
    }
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
        clear: left;
        width: 100%;
        margin: 0.2em 0;
    
        overflow: hidden;
        position: relative;
        right: -2px;
        z-index: 2;
    }
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
        display: block;
        width: 100%;
        padding: 0.6em 1em;
    }
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
        cursor: pointer;
    }
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
        margin-bottom: 0.2em;
        padding-bottom: 0;
        border-right: 1px solid white;
    }
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
        margin-bottom: 10px;
    }
    .ui-tabs.ui-tabs-vertical .ui-tabs-panel {
        float: ;
        width: 28em;
        border-left: 1px solid gray;
        border-radius: 0;
        position: relative;
        left: -1px;
    }

    And I've added this code to my About Us Page TEXT:

    <div id="inner">
    <div id="tabs">
        <ul>
            <li class="aboutnav">
                <div align="right"><a href="#a">Company Overview</a></div>
            </li>
            <li class="aboutnav">
                <div align="right"><a href="#b">About Us</a></div>
            </li>
             <li class="aboutnav">
                 <div align="right"><a href="#c">Contact Us</a></div>
            </li>
        </ul>
        <div id="a">
            Content of A
        </div>
        <div id="b">
            Content of B
        </div>
        <div id="c">
            Content of C
        </div>
    </div>
    </div>

    But unfortunately, it is not functioning like the way I set it up in JSFiddle.

  2. Endlyss
    Member
    Posted 7 months ago #

    I noticed you don't have any CSS for the content containers.
    id="a"
    id="b"
    id="c"

    Would they not need to be styled to be hidden by default with an active one shown?

  3. JAYMICHAELIVING
    Member
    Posted 7 months ago #

    Interesting ... what would that have to look like? It works fine in JSFiddle though.

  4. Endlyss
    Member
    Posted 7 months ago #

    I am not too sure. Would have to sit down and create it, which unfortunately I do not have time to do at the moment. would be later this evening. :(

    But to start with I would have one of the content containers default to "display: none" and then whenever you click on a link, it changes the specified content container to "display: block" or "display: inline-block" with a fade effect.

  5. JAYMICHAELIVING
    Member
    Posted 7 months ago #

    What kind of navigation menu is this called? I cannot find ANYTHING online that has a walk through.

    Any help would be greatly appreciated.

  6. Endlyss
    Member
    Posted 7 months ago #

    Apologies Jay,
    I got wrapped up last night and was not able to hop back on until just now.
    I have a few ideas as to how this could be done, and I am sure that you don't want this idea to just fade away. I would be more than happy to work with you on this over the next few days. Seems like a decent project that would get us both some experience.
    If you have skype, it would be much more efficient to communicate on there. [redacted]

  7. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    @Endlyss -

    If you have skype, it would be much more efficient to communicate on there.

    Please keep help on these forums as per the forum guidelines -

    http://codex.wordpress.org/Forum_Welcome#Helping_Out

    Helping out here is great and much appreciated, but asking people to contact you off the forums is really discouraged here.

  8. JAYMICHAELIVING
    Member
    Posted 7 months ago #

    @Endlyss

    Thanks for helping me out with this.

    The Javascript, HTML and CSS literally everything I could provide without jumping on Skype or sharing my screen (which I know is discouraged).

    @WPyogi
    Is this something you could assist us with? Both myself and @Endlyss are eager to figure this out.

  9. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    Have you gone through this?

    http://codex.wordpress.org/Using_Javascript

  10. JAYMICHAELIVING
    Member
    Posted 7 months ago #

    @WPyogi

    I did indeed have a look through this and unfortunately this did not help my issue.

    I added the JavaScript into the header.php file and it still did not do anything.

    The page looks/functions the same ... :(

Reply

You must log in to post.

About this Topic