Skip navigation
This discussion is locked
Currently Being Moderated

How to get externally made nav bar css into dreamweaver

Jun 11, 2013 1:33 AM

How do I insert 'purecssmenu' made nav bar into dreamweaver? I have a zip file with just the interactive nav bar in it. There used to be an insert nav bar but that seems to have vanished in cs6 presumably because Adobe want you to use Spry!!!

I am completely new to this game but it is not helpful to be constantly told that you should learn coding.

I just want to make 1 tiny personal site. Any constructive help would be very much appreciated.

 
Replies
  • Currently Being Moderated
    Jun 11, 2013 10:26 AM   in reply to handy1912

    handy1912 wrote:

     

    How do I insert 'purecssmenu' made nav bar into dreamweaver? I have a zip file with just the interactive nav bar in it. There used to be an insert nav bar but that seems to have vanished in cs6 presumably because Adobe want you to use Spry!!!

    I am completely new to this game but it is not helpful to be constantly told that you should learn coding.

    I just want to make 1 tiny personal site. Any constructive help would be very much appreciated.

    Uh, no... Spry is no longer supported, because it's obsolete. 

     

    If you've downloaded the code from PureCSSMenu, you simply need to copy and paste it into the correct place in your HTML and that's really about all there is.

    The styling in the downloaded page is copied and pasted into the <head> of your page or an external stylesheet, which you link to.

    The HTML (the menu code-basically an unordered list which you customized at their site) goes in a DIV where you want your navigation menu.

     

    As to the "learn coding" thing, if you were in a cooking school or working in a kitchen, you'd probably be hearing "you need to learn to cook" all the time, so it's not petty, it's sage advice.

     

    (Edit)

    Just for my own experience, I created an account and a navbar at purecss.com after I posted this. The entire process took all of three minutes and I exported my code in a .zip file, which I opened and then copied the <style> tags from, and the HTML. I successfully inserted a PureCSS navmenu into a new page in under five minutes.

     

    Message was edited by: C F McBlob

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 11, 2013 11:57 AM   in reply to handy1912

    It really helps to understand basic HTML structure so you'll know exactly where to copy & paste relevant code into your pages.  

     

    <!DOCTYPE html>

    <html>

    <head>

    <title>Title of the document</title>

    <script>links to JavaScript files</script>

    <style>css rules </style>

    </head>

      <body>

          The content of the document......

    </body>

      </html>

     

    Afterwards, check your code with these online validation tools to ensure you didn't make critical errors.

     

    CSS - http://jigsaw.w3.org/css-validator/

    HTML - http://validator.w3.org/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 11:37 PM   in reply to handy1912

    Sorry you're having such a terrible time not only getting the navbar to work, but interpreting the help here. (That's what it is... help, only you really didn't give us a lot to go on)

    You need to do one of two things if you'd like people to stop "guessing" what's wrong with your page.

     

    1.Upload your page to your server and post the URL here so others can download the source code and analyze it.

    or

    2. Copy and paste your ENTIRE page of code here so it can be seen, downloaded and viewed in someone else's Dreamweaver on their computer. Something like this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>

    <head>

        <meta http-equiv="content-type" content="text/html;charset=utf-8" />

        <title>Generated by Pure CSS Menu.com : Free CSS Drop Down Menu Generator</title>

        <meta name="description" content="Online CSS Menu Maker. Create No-Javascript, 100% CSS Dropdown Menu in seconds! Horizontal css menu & Vertical css menu." />

    </head>

    <body bgcolor="#ffffff">




    <!-- Start PureCSSMenu.com STYLE -->

    <style>

    #pcm{display:none;}
    ul.pureCssMenu ul{display:none}
    ul.pureCssMenu li:hover>ul{display:block}
    ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
    ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
    ul.pureCssMenu,ul.pureCssMenu ul {
    margin:0px;
    list-style:none;
    padding:0px 2px 2px 0px;
    background-color:#333333;
    background-repeat:repeat;
    border-color:#cccccc #111111 #111111 #cccccc;
    border-width:1px;
    border-style:solid;
    }
    ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
    display:block;
    zoom:1;
    float: left;
    }
    ul.pureCssMenu ul{
    width:155.4px;
    }
    ul.pureCssMenu li{
    display:block;
    margin:2px 0px 0px 2px;
    font-size:0px;
    }
    ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
    outline-style:none;
    }
    ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
    display:block;
    vertical-align:middle;
    background-color:#333333;
    border-width:1px;
    border-color:#333333;
    border-style:solid;
    text-align:left;
    text-decoration:none;
    padding:2px 5px 2px 10px;
    _padding-left:0;
    font:normal 12px Trebuchet MS,Tahoma;
    color: #cccccc;
    text-decoration:none;
    cursor:default;
    }
    ul.pureCssMenu span{
    overflow:hidden;
    }
    ul.pureCssMenu li {
    float:left;
    }
    ul.pureCssMenu ul li {
    float:none;
    }
    ul.pureCssMenu ul a {
    text-align:left;
    white-space:nowrap;
    }
    ul.pureCssMenu li.sep{
    text-align:left;
    padding:0px;
    line-height:0;
    height:100%;
    }
    ul.pureCssMenu li.sep span{
    float:none;     padding-right:0;
    width:3px;
    height:100%;
    display:inline-block;
    background-color:#cccccc #111111 #111111 #cccccc;     background-image:none;}
    ul.pureCssMenu ul li.sep span{
    width:100%;
    height:3px;
    }
    ul.pureCssMenu li:hover{
    position:relative;
    }
    ul.pureCssMenu li:hover>a{
    background-color:#377D9F;
    border-color:#377D9F;
    border-style:solid;
    font:normal 12px Trebuchet MS, Tahoma;
    color: #FFFFFF;
    text-decoration:none;
    }
    ul.pureCssMenu li a:hover{
    position:relative;
    background-color:#377D9F;
    border-color:#377D9F;
    border-style:solid;
    font:normal 12px Trebuchet MS, Tahoma;
    color: #FFFFFF;
    text-decoration:none;
    }
    ul.pureCssMenu li.dis a {
    color: #666 !important;
    }
    ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
    height:16px;
    }
    ul.pureCssMenu ul img {width:16px;
    height:16px;
    }
    ul.pureCssMenu img.over{display:none}
    ul.pureCssMenu li.dis a:hover img.over{display:none !important}
    ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
    ul.pureCssMenu li:hover > a img.def  {display:none}
    ul.pureCssMenu li:hover > a img.over {display:inline}
    ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
    ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}
    ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}
    ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}
    ul.pureCssMenu span{
    display:block;
    background-image:url(./images/arr_white.gif);
    background-position:right center;
    background-repeat: no-repeat;
       padding-right:12px;}
    ul.pureCssMenu li:hover>a>span{     background-image:url(./images/arrv_white.gif);
    }
    ul.pureCssMenu a:hover span{     _background-image:url(./images/arrv_white.gif)}
    ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_white.gif)}
    </style>

    <!-- End PureCSSMenu.com STYLE -->




    <!-- Start PureCSSMenu.com MENU -->

    <ul class="pureCssMenu pureCssMenum">

    <li class="pureCssMenui"><a class="pureCssMenui" href="index.html">Home Page</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Product Info</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul class="pureCssMenum">

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">What is New?</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu Features</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul class="pureCssMenum">

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Free Online Generator</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">100% Pure CSS Menu</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">No Javascript Required</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Multi Level Submenus</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Search-Engine Friendly</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Advanced Styling</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Horizontal & Vertical</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>How To Use</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul class="pureCssMenum">

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">1. Select Template</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">2. Customize Items</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">3. Download Zip</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Supported Browsers</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul class="pureCssMenum">

    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Windows OS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul class="pureCssMenum">

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Chrome</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Mozilla</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Opera</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Netscape Navigator</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>MAC OS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul class="pureCssMenum">

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Unix/Linux OS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul class="pureCssMenum">

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Konqueror</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Templates</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

    <ul class="pureCssMenum">

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 1</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 2</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 3</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 4</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 5</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 6</a></li>

    </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">FAQ</a></li>

    <li class="pureCssMenui"><a class="pureCssMenui" href="#">Contact Us</a></li>

    </ul>

    <a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>

    <!-- End PureCSSMenu.com MENU -->




    <!-- (c) 2009, PureCSSMenu.com -->



    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    </body>

    </html>

     

     

     

    Based on your reply, and the troubles you had just getting the domain, I'll have to assume that you can't upload the page, so be a dear, and paste your code here so we can actually see it and troubleshoot it for you.

     

    Let's see if we can get that egg boiled, eh?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 27, 2013 12:18 AM   in reply to handy1912

    Awww... well, you came in here with a piss poor attitude. You smarted off at every last answer you got, and then you refused to follow ANY (of the very good) advice given.

    I'm glad you got it worked out, and who knows? Hopefully you even learned some coding along the way.

     

     

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 27, 2013 12:19 AM   in reply to handy1912

    I am sorry that you are left with that unique impression of this forum.

     

    We do like to help, as Nancy has shown. If you have a look at the points that Nancy has scored (more than 26,000), it means that she has helped more than 2,600 persons who have shown their appreciation. You could multiply this figure by 3 to add those persons that have been assisted by Nancy, but have not bothered to thank her.

     

    Your attitude towards the people that are offering their assistance is not great. This may be a reason for the number of raw eggs.

     

    In one of your other posts, you have said to be 100% committed to Muze. That is an eggcellent (sic) idea for people that are not committed to coding.

     

    In passing, please show your appreciation for those that have helped you. Your history shows a marked lack thereof.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 27, 2013 1:06 AM   in reply to handy1912

    Whatever!

     

    Love,

    Derie

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points