Vertical Subnav Menu within Page

  • JAYMICHAELIVING

    (@jaymichaeliving)


    10 years, 4 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.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Endlyss

    (@akel-res)

    10 years, 4 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?

    Thread Starter JAYMICHAELIVING

    (@jaymichaeliving)

    10 years, 4 months ago

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

    Endlyss

    (@akel-res)

    10 years, 4 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.

    Thread Starter JAYMICHAELIVING

    (@jaymichaeliving)

    10 years, 4 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.

    Endlyss

    (@akel-res)

    10 years, 4 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]

    WPyogi

    (@wpyogi)

    10 years, 4 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.

    Thread Starter JAYMICHAELIVING

    (@jaymichaeliving)

    10 years, 4 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.

    WPyogi

    (@wpyogi)

    10 years, 4 months ago

    Have you gone through this?

    http://codex.wordpress.org/Using_Javascript

    Thread Starter JAYMICHAELIVING

    (@jaymichaeliving)

    10 years, 4 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 … 🙁

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Vertical Subnav Menu within Page’ is closed to new replies.