18 replies [Last post]
cherry2000
cherry2000's picture
Offline
Regular
Last seen: 7 years 29 weeks ago
Timezone: GMT-6
Joined: 2011-01-14
Posts: 29
Points: 45

i really like these "horizontal pull out"? menus. i dont know how else to call them. does anyone know where i can find some example codes for them? are they with js? i checked the page sources put they are kinda complicated for me...

see the menu examples on these zoo websites:

www.artis.nl
www.apenheul.nl

thanks a lot! Smile
cherry2000

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Megamenus

They're called megamenus and they use javascript and CSS.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 58 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

block dropdown

Thanks T. I had never seen it named.

The first link's menu works with js disabled. The css? Whoever decided to save the css in one line is, in my informed opinion, an idiot. No way would I dig through that without being on the clock.

The second link points to a page, not just the menu, that is broken with js disabled.

I put together a simple prototype, css only. There's plenty of tweaks still needed, but it may give the OP some ideas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      test--menu
    </title>
    <meta content="text/html; charset=utf-8"
          http-equiv="content-type" />
    <style type="text/css">
/*<![CDATA[*/
 
    html, body {
    padding: 0;
    margin: 0;
    }
 
    ul#mainnav {
      padding: 0;
      margin: 0;
      text-align: center;
      vertical-align: top;
      word-spacing: -.35em;
      }
 
    ul#mainnav li {
      display: inline-block;
      word-spacing: normal;
      }
 
    ul#mainnav li a {
      padding: 0 3em;
      }
 
    ul#mainnav ul {
      display: none;
      background-color: black;
      color: white;
      list-style: none;
      opacity: 0.5;
      }
 
    ul#mainnav ul li {
      display: block;
      }
 
    ul#mainnav ul li a {
      padding: 0;
      }
 
    ul#mainnav:hover ul {
      display: block;
      }
 
    /*]]>*/
    </style>
  </head>
  <body>
    <ul id="mainnav">
 
      <li>
        <a href="">item</a>
        <ul>
          <li>
            <a href="">item</a>
          </li>
 
          <li>
 
            <a href="">item</a>
          </li>
        </ul>
      </li>
 
      <li>
        <a href="">item</a>
        <ul>
 
          <li>
            <a href="">item</a>
          </li>
 
          <li>
            <a href="">item</a>
          </li>
        </ul>
      </li>
 
      <li>
        <a href="">item</a>
        <ul>
          <li>
            <a href="">item</a>
          </li>
 
          <li>
            <a href="">item</a>
          </li>
        </ul>
      </li>
 
      <li>
        <a href="">item</a>
 
        <ul>
          <li>
            <a href="">item</a>
          </li>
 
          <li>
            <a href="">item</a>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: Whoever decided to

Quote:

Whoever decided to save the css in one line in my informed opinion, an idiot

It's likely that actually it's been deliberately Minified There will now be a vogue for many things like this happening, in a similar fashion to the horrors we rail against, Resets, CSS frameworks(well I rail against these) are followed.

Yslow, and the Google speed testing service both make recommendations for speeding up pages and of course the ill informed and uneducated will be following the instructions these automated tools provide to the letter.

It is true though that there is an increasing need to for pages to work faster but that is due to the staggering and frighting amount of scripting being run a pages along with third party calls to external resources all dragging pages down to resemble slugs.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 58 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

thwippp!

The savings from squishing text will all be eaten by the poor sod who has to mess with that page and its css after the original well-formatted copy has been lost or got completely out of synch. I don't care how many safeguards are in place, if there are two copies, one will be wrong; especially after the original maintainer has gone his merry way.

These are the same people, likely, who link a 100kB js library to manage the task of a 100 or so lines of code. I actually did see a 100kB library, and the only thing it was used for, I wrote into 9 lines.

Bah! Humbug!

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

So couldn't agree more but

So couldn't agree more but sadly you have to look at what's happening with web development to see that it's following a dark path which leads to caca, like lemmings all are drawn to the mashup, the effect laden site, the JS libraries, look at WP! in reality these issues are not the fault of the end developer - who now knows little in reality about actually writing a site from scratch which would be beyond their skill level and ken - but of the application frameworks that account for probably two thirds or more of the sites out there now.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 36 weeks 19 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

gary.turner wrote: The

gary.turner wrote:

The savings from squishing text will all be eaten by the poor sod who has to mess with that page and its css after the original well-formatted copy has been lost or got completely out of synch. I don't care how many safeguards are in place, if there are two copies, one will be wrong; especially after the original maintainer has gone his merry way. ...

What I do is upload the formatted CSS to the server and have the server squish it down to one line and serve it that way. That way there is only one well-formatted copy to maintain but anyone downloading it gets the smaller version.

The difference is not that great as a CSS file is usually pretty small to begin with but it does save a few kb here and there. I wonder if it's worth it at all.

Besides, if I get a shrunken version of someone's CSS all I do is paste it into Visual Studio and hit the format button. I also do that for CSS files that someone else formatted to their preference so that it changes it to my preference. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yeah but Gary's Emu editor

Yeah but Gary's Emu editor probably can't do anything as clever as reformat... waits...

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 36 weeks 19 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Hugo wrote: Yeah but Gary's

Hugo wrote:

Yeah but Gary's Emu editor probably can't do anything as clever as reformat... waits...

I didn't mean to start a religious war. Tongue

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 58 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Hugo wrote: Yeah but Gary's

Hugo wrote:

Yeah but Gary's Emu editor probably can't do anything as clever as reformat... waits...

I don't think it does that out of the box, as I doubt any real coders, such as would use Emacs, would ever screw up the format like that to begin with. After a moment's thought, though, it becomes obvious that extending Emacs's capabilities with a css reformatter would be a trivial exercise.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 58 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Verschwindende wrote: … I

Verschwindende wrote:

… I didn't mean to start a religious war. Tongue

You didn't. Apparently, as a child, Hugo was attacked by a large bird at the petting zoo. The episode has severely colored his ability to reason regarding anything that starts Em….Laughing out loud

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

:?

With a path like /media/CACHE/css/121d58169b4f.css, I think it's pretty clear that the minification's all being done dynamically on the server and that the original uncompressed file will be stored in a different location which will mirror the directory structure of the development server.

I think your concerns about future maintenance are unfounded. Any agency worth their salt's not going to set up practices that make it harder for themselves further down the track, and your comments about 'original maintainer' I think only apply in cases where a sole operator has been responsible for the site in the first place.

Does a sole operator have to think about people other than him/her having to edit their work once a site is finished? I'd suggest only if an agreement was in place that that was to be the case, in which case you'd be liaising prior to the event of hand over with those people to let them know how things were put together anyway, and then it'd be up to them to document it properly.

If you're going to be responsible for the work you've created, I don't see you as having any obligation to work in any way other than one that suits you.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 58 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Maybe, maybe not

Tyssen, you make good points, but….

In a perfect world, or one wherein documentation is up to date and available, what you say is true. In the world where I live, as a fixer and not the ab initio developer, all too often documentation is a joke. More than likely the developer is a Photoshop+Dreamweaver driver who got in over his head and beat feet. It's not so bad when I'm working with the developer to solve some issue; I can always kick it back to them for formatting. You'd be surprised how many write their css and html on a single line. Mostly that's because they haven't a clue how to configure their editors, and because they don't, I get to do it.

While in this case, the css was likely minimized on the server and cached, soi-disant developers often do it locally, then upload the tiny-sized version.

Until such time as my world becomes perfect, I shall cry my plaints long and loud.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

cherry2000
cherry2000's picture
Offline
Regular
Last seen: 7 years 29 weeks ago
Timezone: GMT-6
Joined: 2011-01-14
Posts: 29
Points: 45

thanks all!!!

thanks all!!!Smile

cherry2000
cherry2000's picture
Offline
Regular
Last seen: 7 years 29 weeks ago
Timezone: GMT-6
Joined: 2011-01-14
Posts: 29
Points: 45

lol i didnt realise i started

lol i didnt realise i started an argument topic:glasses:

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 58 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

cherry2000 wrote: thanks

cherry2000 wrote:

thanks all!!!Smile

For all the off topic stuff, too?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's a tradition of the

It's a tradition of the forum, they like to embellish threads with a little off topic, tangential ramblings, one tries to moderate and keep things on track but it's a losing battle Big smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cherry2000
cherry2000's picture
Offline
Regular
Last seen: 7 years 29 weeks ago
Timezone: GMT-6
Joined: 2011-01-14
Posts: 29
Points: 45

well, i was wondering why

well, i was wondering why they kept all those websites keep their css in one line etc.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Minifying or packing is a

Minifying or packing is a form of compression, idea being that placing all on one single line saves a lot of space and reduces the file size and thus downloads faster using less data transfer on both ends. Best example of this is the jQuery library, the main core library file comes in three flavours, a regular one, that can be read and edited if wished, and one that has been minified with all code on one or two lines and is intended as the one you upload and use on your production site.

This minifying is clearly something that causes Gary great consternation, but most of us cope with it without getting too flustered Tongue

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me