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...

---

Is this what you are looking for?

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

Quote:

---

Originally Posted by styxlawyer

Is this what you are looking for?

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

---

Quote:

---

*) 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

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.

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 ;)

The CSS file is here:

Attachment 6143

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.

I should THANK YOU now...

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

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).

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

Quote:

---

Originally Posted by Beverleyh

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