Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: adjusting the dropbox appearance

  1. #1
    Join Date
    Feb 2017
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default adjusting the dropbox appearance

    1) Script Title: adjusting the dropbox appearance

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...side_bar_menu/

    3) Describe problem: not a problem, just questions...

    OK, I hope I am doing this right (following the forums, posting in the right places, etc).

    *) How to remove the box shadow out of the submenus?

    *) How to make the box edge into "rounded corner" (including the main menu)?

    *) This side menu design in CSS uses "." (dot), so that's CLASS then? Was there a reason for that, instead of use "#" for ID? Just asking, nothing I want to change.

    *) How to call the NAV.PHP into INDEX.PHP? What I am trying to do is put all the menu coding in NAV.PHP file, to make the INDEX.PHP file less clutter.

    *) Do I need Java file somewhere for this to work?

    *) Should the website be in PHP or HTML, or it doesn't matter? See below of my coding:

    Code:
    INDEX.PHP
    <link rel="stylesheet" type="text/css" href="style.css" />
    
    <?php include("nav.php"); ?>
    
    <div>
    <p> ...</p>
    <p> ... Words to live by...</p>
    <p> ...</p>
    </div>
    
    NAV.PHP
    <div class="nestedsidemenu">
    <ul>
    <li><a href="#">Home</a></li>
    etc...
    
    
    STYLE.CSS
    stuff...

  2. #2
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    Is this what you are looking for?

    http://mydesk.myzen.co.uk/ddStuff/sideMenu/

  3. #3
    Join Date
    Feb 2017
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by styxlawyer
    Is this what you are looking for?

    http://mydesk.myzen.co.uk/ddStuff/sideMenu/
    *) How to remove the box shadow out of the submenus?

    *) How to make the box edge into "rounded corner" (including the main menu)?
    YES. THAT is great. I couldn't find the trick myself?

    Quote Originally Posted by styxlawyer
    http://mydesk.myzen.co.uk/ddStuff/sideMenu/
    This is also what I am interested in too... if I create website, it always ends with a filename, but yours shows up to foldername. How to do that? Even better, I have seen that home address remains throughout regardless how many pages jumping back and forth (stays like http://mydesk.myzen.co.uk). This is really OT, but something I like to learn as well (hopefully requires NO Java??).

    Chuck

  4. #4
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    If you look at the source of that page (CTRL+U on your browser) you'll see that I have just added a "class" to the first and last entries in each list of links. At the top of the stylesheet there are two new entries which add rounded corners to the top and bottom of those tow classes respectively. The drop-shadow is simply commented out in this entry in the stylesheet:

    Code:
    /* Sub ULs style */
    .nestedsidemenu ul li ul {
        position: absolute;
        left: -5000px;
    		top: 0;
        opacity: 0;
        width: 230px;
        visibility: hidden;
    /*    box-shadow: 2px 2px 5px gray; */
        -webkit-transition: opacity .3s, visibility 0s .3s, left 0s .3s;
        transition: opacity .3s, visibility 0s .3s, left 0s .3s;
    }
    If you are just starting out this series of tutorials is quite informative.

  5. #5
    Join Date
    Feb 2017
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by styxlawyer
    If you look at the source of that page (CTRL+U on your browser) you'll see that I have just added a "class" to the first and last entries in each list of links.
    I see that (class first and last)

    Quote Originally Posted by styxlawyer
    At the top of the stylesheet there are two new entries which add rounded corners to the top and bottom of those tow classes respectively.
    Could you help by providing coding for these two class for me? It isn't shown in the source page.

    Quote Originally Posted by styxlawyer
    The drop-shadow is simply commented out in this entry in the stylesheet:
    Interesting as I did that, it didn't remove the shadow edges? I did that few times, but now it finally did that. What matter now is it works now

    As in original post... (6) should use all HTML file extensions, or use PHP? it's my understanding that they are same thing, just changing the extensions (which I think I am wrong too). (4) how to call <div class="nestedsidemenu"> FROM NAV.PHP (would like to have all ul/li coding in there) into other webpages?

    I WILL THANK YOU

  6. #6
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    The CSS file is here:

    nestedsidemenu.css

    The two new classes are at the top and the commented-out drop-shadow is on line 62.

    HTML is the basic coding system for all web pages and PHP is a server-side programming language which executes on the server when the page is accessed and serves HTML to the browser. PHP pages can also contain raw HTML. I think you need to do a lot more basic reading before you start trying to build web pages.

  7. The Following User Says Thank You to styxlawyer For This Useful Post:

    CNT (02-19-2017)

  8. #7
    Join Date
    Feb 2017
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    I should THANK YOU now...

    I still have some little unanswered questions (still in the original post)... but, as said, GO READ!

  9. #8
    Join Date
    Feb 2017
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    As I kept working on this... I have come across to this coding and I put it in the very end of CSS.

    Code:
    @media screen{
      body>div.nestedsidemenu{
       position:fixed;
      }
     }
    While it does what I want it to do (side menu always stays in one spot and does not move). It still doesn't put the main content onto the right side of the menu (text scrolls behind the menu). I am thinking something like height=100% but don't know where to put it. Is this above the right coding to do this or there's other (better?) ways to do this?

    The hover submenu, of course, would spread out over main content.

    Maybe I would like to put an image or other links or even gifs/video below the menu, as long it still remain fixed and within the menu width (the whole left side is fixed).

  10. #9
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    It sounds like you would benefit from a crash course in learning how to code a basic structural page layout. This is a good site to get you started http://learnlayout.com
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  11. The Following User Says Thank You to Beverleyh For This Useful Post:

    CNT (02-22-2017)

  12. #10
    Join Date
    Feb 2017
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by Beverleyh View Post
    a crash course
    http://learnlayout.com
    Well, for starters, I too have been on a little mission some time ago with what screen resolutions do most users set on, along type of monitor widths. But, now it's long ago (we are even in HD era and possibly 4K by now).

    First off, this crash course didn't enable me to create a fixed side. Yes, it supposed to give me stuff for me to think and try different things. One way I learn things is to see an actual working coding (and results). Then sometimes so much coding just overwhelming at once. Like for example, when I download the nestedsidemenu, I understood so much of it, yet couldn't understand the -webkit- and -moz- (still don't), but hope to learn as well. Such sometimes omit/comment out parts of coding doesn't change anything to be able to see what it does (along with browsers cache issues I had too).

    Back to the crash course... box-sizing and border-box is admirable, very good feature. I bookmarked that link and will review it over again soon.

    Of course, dynamicdrive.com isn't the only website. I use w3school.com too, along with others (YouTube.com too). I am looking for step-by-step teachings. I am not excusing myself being DEAF, but lot of teachings are auditory. Again, your crash course was good one.

    Chuck

Similar Threads

  1. Cross-browser Styled Dropbox
    By KennyP in forum CSS
    Replies: 21
    Last Post: 08-25-2014, 03:39 PM
  2. Dropbox
    By Medyman in forum The lounge
    Replies: 2
    Last Post: 03-02-2009, 05:33 PM
  3. button 'over appearance
    By neilkw in forum Flash
    Replies: 1
    Last Post: 02-08-2007, 02:17 PM
  4. Amazon style dropbox delay option?
    By adambm in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 10-06-2006, 08:08 AM

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
  •