5

At http://learn.knockoutjs.com/ there is a tutorial about single-page applications. Around the second step, the bulleted list is transformed into a horizontal menu. How does that get rendered?

(I.e., is it a purely CSS solution that causes that, or is it using jQuery UI, or what?)

I've viewed the source of the page, and it looks like there's a lot of automation going on to run the code in the demo. It's not clear to me how that's working, and I'd really like to know as I'm trying to reproduce that approach in a test app of my own.

2 Answers 2

7

It's pure CSS.

HTML

<ul class="folders">
    <li>Inbox</li>
    <li>Archive</li>
    <li class="selected">Sent</li>
    <li>Spam</li>
</ul>​

CSS

.folders { background-color: #bbb; list-style-type: none; padding: 0; margin: 0; border-radius: 7px; 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d6d6d6), color-stop(0.4, #c0c0c0), color-stop(1,#a4a4a4)); 
    margin: 10px 0 16px 0;
    font-size: 0px;
}
.folders li:hover { background-color: #ddd; }    
.folders li:first-child { border-left: none; border-radius: 7px 0 0 7px; }
.folders li { font-size: 16px; font-weight: bold; display: inline-block; padding: 0.5em 1.5em; cursor: pointer; color: #444; text-shadow: #f7f7f7 0 1px 1px; border-left: 1px solid #ddd; border-right: 1px solid #888; }
.folders li { *display: inline !important; } /* IE7 only */
.folders .selected { background-color: #444 !important; color: white; text-shadow:none; border-right-color: #aaa; border-left: none; box-shadow:inset 1px 2px 6px #070707; }    ​

You can see this working in this fiddle: http://jsfiddle.net/jearles/UcwC7/

0
6

Ryan Neimeyer's sample at http://jsfiddle.net/rniemeyer/PKDdG/ includes an external reference to webmail.css, which is pointing to http://learn.knockoutjs.com/Content/TutorialSpecific/webmail.css. That's how I found out how the tutorial is working the way it is, because when I try to view source on the tutorials page, I don't see webmail.css being used.

If I include

<link rel="stylesheet" href="http://learn.knockoutjs.com/Content/TutorialSpecific/webmail.css" />

between the tag in my local test app file, I get the same updated css view as the tutorial. You can also open /Content/TutorialSpecific/webmail.css to view the contents.

1
  • 2
    Right-click, choose view frame source and you'll see a reference to /Content/TutorialSpecific/webmail.css. Didn't realize the html result was in a frame. Commented Jul 11, 2014 at 15:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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