5
\$\begingroup\$

I am a tyro with OOCSS and think I bit off more than I can chew in creating a dropdown bubble for a menu item.

I removed as much element specific code as I could, but still think I don't quite have it down.

I know my class names are all messed up, but I'm really just messing around right now.

For example: should the dropdownContain have the positioning, or more like set the margin that gives the position .drop .dropdownContain {margin-left: -100px} that way the dropdownContain can be re-used later?

Any suggestions?

CSS:

li {
    list-style-type: none;
}

ol, ul {
    list-style-type: none;
    font: 13px Verdana, 'Lucida Grande';
    cursor: pointer;
}
ol>li, ul>li {
    margin: .2em 0
}
.navDropDown .drop {
    position: relative;
}
.triangle {
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
}
.dropOut .triangle {
    top: -8px;
    left: 50%;
    margin-left: -8px;
}
.dropdownContain {
    position: absolute;
    z-index: 2;
    left: 50%;
    margin-left: -100px;
    top: -400px;
 }
.dropOut {
    width: 200px;
    background: white;
    float: left;
    position: relative;
    margin-top: 0px;
    opacity: 0;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
    transition: all .1s ease-out;
}
.dropOut .dropDown {
    float: left;
    padding: 10px 5px;
}
.dropList {
    width: 155px;
    padding: 5px 0 5px 15px;
    margin: 0px 10px;
    color: #777;
    border-radius: 4px;
    transition: background .1s ease-out;
}
.dropDown .dropList:not(:first-child):hover {
    background: #f6f6f6;
    width: 155px;
}
.drop:hover .dropdownContain {
    top: 18px;
}
.drop:hover .dropOut {
    opacity: 1;
    margin-top: 8px;
}

HTML:

<div class="header">
    <div class="set">
        <ul class="navDropDown">
            <li class="drop">
                <img src="http://pogoplug.com/images_5_0/head-ico-settings.png" />
                <div class="dropdownContain">
                    <div class="dropOut">
                        <div class="triangle"></div>
                        <ul class="dropDown">                                
                        <li class="dropList"><strong>E-Mail</strong>
                        </li>
                        <li class="dropList">Settings</li>
                        <li class="dropList">Account</li>
                        <li class="dropList">Download Software</li>
                        <li class="dropList">Help</li>
                        <li class="dropList">Sign Out</li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</div>

http://jsfiddle.net/mHvYQ/5/

\$\endgroup\$
  • 1
    \$\begingroup\$ you should add the HTML to this Question, I think that it would help us understand more of what is going on with the CSS \$\endgroup\$ – Malachi May 30 '14 at 21:06
  • \$\begingroup\$ Good point! Added. \$\endgroup\$ – CaseCracker May 30 '14 at 22:31
1
\$\begingroup\$

To be honest I don't quite understand what you are asking in your question, so I'll just do a general review:

You said your class names are temporary (you should only be posting "finished" code here), however currently they are very confusing because they are all very generic or don't actually say what they are for.

Apart from that you have far too many class names and possibly too many unnecessary DIVs. Use class names only in exceptional cases. For example, having all list items have the same class name is useless. Also use other HTML elements other than div and lists. header, 'nav' and h# would help here a lot.

The triangle DIV is unnessary. Use the CSS pseudo element :before instead.

And have the title element ("E-Mail") should not be identified by be the first element of the list, but should either have a class, or possible moved out of the list all together and marked up with a heading element (h3 or so).

The HTML could look something like this:

<header>
    <nav>
        <ul>
            <li class="dropdown">
                <img src="http://pogoplug.com/images_5_0/head-ico-settings.png" />
                <div class="dropdown-menu">
                    <h3>E-Mail</h3>
                    <ul>       
                        <li>Settings</li>
                        <li>Account</li>
                        <li>Download Software</li>
                        <li>Help</li>
                        <li>Sign Out</li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>
</header>
|improve this answer|||||
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.