SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    navigation bar example

    Hi,

    Where can I find css example of Apple-like navigation bar (including the search field) ?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    It's just a horizontal list (floated) with backgroound images/colors.

    The search box is just a background image on an <input>. Nothing special really. There are many many examples of it. Suckerfish has nice menus if you require a dropdown.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I couldn't find such simple thing anywhere.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    http://htmldog.com/articles/suckerfish/

    Take a suckerfish there (dropdown if you wish idc) and then on the <li>'s (the main ones) add float:left; to it, and on the <ul> add overflow:hidden;

    It''s REALLY easy to convert a menu to horizontal.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by runrunforest View Post
    I couldn't find such simple thing anywhere.
    As Ryan said the menu is pretty simple CSS and you could easily converts something like this old example to look like what you want.

    The input is no problem and you just place it in the last list item. The apple site just places a wrap around the input and applies a background image to each side of an input.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •