CODEWITHSUNDEEP
jqueryhtmlcss
user3997246
user3997246

Reputation:

Some CSS issues

I am trying to create sliding navigation with off-page effect however I'm stuck with some CSS.

Here's the JSFIDDLE: http://jsfiddle.net/jdfmb718/6/

  1. My first issue is that the + (plus button) won't toggle with - (minus button) my jQuery is working I am confident that this is a CSS/HTML issue.

  2. The (+) plus button was not properly place on the links. It should be on the PORTFOLIO and ABOUT US link. Though my HTML is right this won't show up right. See my Markup:

    MENU

                <ul id="toggle">
                <li>
                    <div class="active">
                        <span class=
                        "menu-icons home menu-icons fa fa-home"></span>
                        <a href="#">HOME</a>
                    </div>
                </li>

                <li>
                    <div>
                        <span class="menu-icons about fa fa-user"></span>
                        <a href="#">ABOUT US</a> <span class=
                        "the-btn fa fa-plus"></span>

                        <ul>
                            <li>
                                <a href="#">OUR TEAM</a>
                            </li>

                            <li>
                                <a href="#">OUR SERVICES</a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li>
                    <div>
                        <span class=
                        "menu-icons portfolio fa fa-briefcase"></span>
                        <a href="#">PORTFOLIO</a><span class=
                        "the-btn fa fa-plus"></span>
                    </div>

                    <ul>
                        <li>
                            <a href="#">WEB DESIGN</a>
                        </li>

                        <li>
                            <a href="#">GRAPHIC DESIGN</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <div>
                        <span class=
                        "menu-icons contact fa fa-envelope"></span>
                        <a href="#">CONTACT</a>
                    </div>
                </li>
            </ul>
        </div><a class="toggle-nav fa fa-bars" href="#" id="bars" style=
        "font-style: italic"></a>

        <h1>TESTING Navigation</h1>
    </div><!-- #site-canvas -->
</div><!-- #site-wrapper> -->

  3. I am struggling accessing the child unordered list I want to move it a little bit on the left and put some list-style: circle on it however for some reason I can't target it

  4. PORTFOLIO 

        <ul>
        <li>
            <a href="#">WEB DESIGN</a>
        </li>

        <li>
            <a href="#">GRAPHIC DESIGN</a>
        </li>
    </ul>
</li>

I want it to be like this:

enter image description here

Would you mind helping me with the JSFIDDLE code?

Upvotes: 2

Views: 126

Answers (2)

user4093740
user4093740

Reputation: 

      <li>
         <a href="#">WEB DESIGN</a>
      </li>
      <li>
        <a href="#">GRAPHIC DESIGN</a>
      </li>

      Change to:
      <li style="margin-left:62px">
        <a href="#">WEB DESIGN</a>
      </li>
      <li style="margin-left:62px">
        <a href="#">GRAPHIC DESIGN</a>
      <li>

Upvotes: 1

lee_gladding
lee_gladding

Reputation: 1100

So, taking a quick look there are a few issues, I will try to point them out in order. (Just to mention I am trying to help by patching what you have, starting from scratch myself I would probably lay this out, style and JS code it completely differently)

Firstly:

For point 1)

you are trying to select 

var $currIcon=$(this).find("span.the-btn > i");

You are not using an i tag, change this to:

var $currIcon=$(this).find("span.the-btn");

EDIT: also change the other reference too.

$("span.the-btn").not($currIcon).addClass('fa-plus').removeClass('fa-minus');

For point 2)

The CSS for span.the-btn has a margin-top of -29px, this is pushing the plus button up into the container above. try using a margin-top of 12px

For point 3)

to access that child list use #toggle ul li {}

as it is a ul under toggle

For point 4)

so using:

#toggle ul {
     list-style: disc;
}

#toggle ul li {
     margin-left: 109px;   
}

#toggle ul li a {
     margin-left: 0;   
}

http://jsfiddle.net/jdfmb718/12/

Will give you similar to what you are after. However this will cause problems when you try to create the hover states as you are trying to use the native list style bullets this way.

A better way would be to do something along the lines of:

moving the a tag across to line up with the parent title and then add a before pseudo element with a graphic for the bullet you want (img, svg, font-icon, your choice). That way you could still style the li to have a hover state that covers the entire box.

or

use the a tag to fill the whole area so that a click anywhere on the block would take them to the place you want. and create the link text and bullet using further elements, pseudo elements or a mixture of both.

Upvotes: 0

Related Questions