javascript - CSS NavBar Transition Trouble -


im having trouble navigation bar hover effects transitions(line 109/110). want whichever link mouse hovering on raise(margin increase of 2%) while other links hold margin of 0. problem link margins increase 2% whenever hover on of them. first time posting sorry messy code, if broke posting rules and/or if question unclear @ all. played around abit , couldnt figure out. if simpler can figure out how using javascript.
cheers

<!doctype html> <html>  <head>     <title>             atticus products     </title>  <script src="http://code.jquery.com /jquery-1.9.1.js"> </script> <script>   /*  $(document).ready(function(){   $("a").hover(function(){     $("a").animate({up:'250px'});   }); }); */ </script>    <style>     html, body {         height:100%;         width:100%;         margin:0;         padding:0;         font-size:100%;         background-color:#6ec247;         font-family: caecilialtstd75bold,helvetica,arial,sans-serif;             }       #wrapper {         margin: 0 auto;          width: 50%;          height: 100%;          position: relative;     }    /*header: contains logo , navbar*/     #header {         border-bottom: 8px solid #f2f2f2;         overflow:hidden;         height: auto;         position:relative;         clear:both;         height:auto;         margin:0;         display:block;               }      #logoname {          max-width: 100%;         width:40%;         float:left;         height:150px;     }      #logoname {         position:absolute;         bottom:0;         color:#ffffff;         text-decoration: none;         font-size:3em;         font-weight: bold;     }       /*navbar*/     #nav {         margin: 0;          padding: 0;          list-style: none;          text-align: right;          right:0;         width:60%;         float:right;         position:absolute;         bottom:0;     }      #nav li {         display: inline;       }      #nav li {         display: inline-block;          padding: 8px 15px;          text-decoration: none;          font-weight: bold;         color: #ffffff;         font-size:1em;         margin-bottom:0;     }       #nav li a:hover {         color: #c00;          background-color: #000000;         opacity:0.5;         transition-property: margin-bottom;         transition-duration:4s;         margin-bottom:2%  /*this problem is*/         }   /*content: contains container1, logowords , logo1*/      #content {         height: 60%;          text-align: center;          /*background-color: #4d8e2f;*/         color:#ffffff;         margin:0;         top:0;         display:relative;         font-weight: bold;     }      #container1 {         display: block;          max-width: 100%;         position:relative;         height:40.5%;         width:100%;         margin:0;         background-color:#6ec247 ;         z-index:0;         border-bottom: 8px solid #f2f2f2;     }      #logowords{         z-index:1;         display:block;         position:absolute;         width:auto;         height:auto;         top:18.5%;         right:0;         color:#ffffff;         text-decoration: none;         font-size:2.5em;         font-weight: bold;         text-align:left;     }        #logo1 {         display:block;         z-index:1;         position:absolute;         left:0;         top:18.5%;         width:auto;         height:auto;     }        #content{         background-color:#6ec247 ;     }       #content p {         margin:0;     }       #footer {         height:10%;          width: 100%;          position: absolute;          bottom: 0;          background-color: #f2f2f2;          border-bottom: 1px solid #ccc;          border-top: 1px solid #ccc;     }     </style> </head> <body>  <div id="wrapper"> <div id="header">       <ul id="nav">         <li><a href="index.html">about</a></li>         <li><a href="ourapproach.html">our approach</a></li>         <li><a href="careers.html">careers</a></li>         <li><a href="contact.html">contact</a></li>     </ul>        <div id="logoname">     <a href="index.html">atticus <br>products</br></a>     </div>     </div>  <div id="content">      <div id="container1">     </div>      <img id="logo1" src="image/justlogo.png" alt="logo" width="207"         height="214">      <div id="logowords">     <p><br>we find people</br> make company succeed</p>     </div>        <div id="content">     <p>         <br>careers atticus</br>      </p>     </div> </div>   <div id="footer">     <p>bam</p> </div>  </div> </body> </html>

your problem in jquery. because have $('a').animate effect every element on page. can around changing 'a' 'this' without quotation marks.

$(document).ready(function(){   $("a").hover(function(){     $(this).animate({up:'250px'});   }); });

this effect element being hovered over. best of luck.


Comments

Post a Comment

Popular posts from this blog

user interface - Python attempting to create a simple gui, getting "AttributeError: 'MainMenu' object has no attribute 'intro_screen'" -

complete newbie here python started learning language few days ago (with no programming experience beforehand). i'm bashing skull against desk here, trying create 1 menu button lead menu, supposed replace/hide/destroy previous menu (either works, long process can reversed). what i've come far: import wx class mainframe(wx.frame): def __init__(self): wx.frame.__init__(self, none) self.centre() self.main_menu = mainmenu(self) self.intro_screen = introscreen(self) self.intro_screen.hide() class mainmenu(wx.frame): def __init__(self, parent): wx.frame.__init__(self, parent=parent) self.main_menu = mainmenu panel = wx.panel(self) sizer = wx.boxsizer(wx.vertical) nextscreen = wx.button(panel, label='next screen', size=(150,30)) nextscreen.bind(wx.evt_button, self.nextscreen) sizer.add(nextscreen, 0, wx.center|wx.all, 5) self.show() self.c...
Read more

jquery - Common JavaScript snippet to share files on Google Drive, Dropbox, Box.net or SkyDrive -

this first assignment of file sharing. need share files our website above mentioned locations. currently, have been exploring each service’s api file sharing. question 1 : there javascript code snippet available (like addthis.com ) share files? question 2 : should use server side coding file sharing or javascript advisable? thanks viewers. found useful plug-in named "ink file picker". saves given http file resource directly users online storage engine. url: https://developers.inkfilepicker.com/docs/web/ live example: http://ctrlq.org/save/
Read more

Android Gson.fromJson error -

i've completed tutorial how connect json url , parse content using gson library. code works fine url specified in tutorial, tryed modify work this url . tryed display 1 field second ulr, base field, can't work. here code, please help: public class jsonparsingactivity extends activity { string url = "http://api.openweathermap.org/data/2.5/weather?q=london,uk"; @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); inputstream source = retrievestream(url); gson gson = new gson();// main gson class reader reader = new inputstreamreader(source); searchresponse response = gson.fromjson(reader, searchresponse.class); //gson.fromjson(string, class) toast.maketext(this, response.base, toast.length_short).show(); } private inputstream retrievestream(string url) { defaulthttpclient client = new defaulthttpclient(); httpget getrequest = new httpget(url);...
Read more