jquery

<!DOCTYPE html>
<html id="main">
        <style>
            a {
                -webkit-transition: all 0.375s;
                -moz-transition: all 0.375s;
                -ms-transition: all 0.375s;
                -o-transition: all 0.375s
            }
            ul
            {
                list-style-type:none;
                margin:0;
                padding:0;
                overflow:hidden;
            }
            li
            {
                float:left;
                padding-right: 10px;
            }
            a:link,a:visited
            {
                display:block;
                width:;
                font-family:arial;
                font-weight:bold;
                color:#cccccc;
                text-align:center;
                padding:8px;
                text-decoration:none;
                text-transform:uppercase;
                border-bottom: 1px solid #cccccc;
            }
            a:hover,a:active
            {
                color: #808080;
                border-bottom: 1px solid #808080;
            }
            #dynawidth {
                display:block;
                width:;
                font-family:arial;
                font-weight:bold;
                color:#cccccc;
                text-align:center;
                padding:8px;
                text-decoration:none;
                text-transform:uppercase;
                border-bottom: 1px solid #cccccc;
            } #dynawidth:hover {
                color: #808080;
                border-bottom: 1px solid #808080;
            }
        </style>
    <body>
        <ul>
          <li><a href="#home" id="home">Home</a></li>
            <li><a href="#about me" id="about">About Me</a></li>
            <li><a href="#contact" id="contact">Contact</a></li>
            <li><a href="#miniblog" id="miniblog">Mini-blog</a></li>
            <li><a href="#buffer tab" id="buffer1">Buffer Tab</a></li>
            <li><a href="#buffer tab" id="buffer2">Buffer Tab</a></li>
        </ul>
        <center>
            <h1 style="font-family:arial; text-align:center; color:#777777; font-size:80px;">Swaraj</h1>
        </center>
    </body>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript">
        function getWinWidth() {
            return $(document).width();
        }
        var home = document.getElementById('home');
        home.style.width = (getWinWidth() / 7).toString() + "px";
        var about = document.getElementById('about');
        about.style.width = (getWinWidth() / 7).toString() + "px";
        var contact = document.getElementById('contact');
        contact.style.width = (getWinWidth() / 7).toString() + "px";
        var miniblog = document.getElementById('miniblog');
        miniblog.style.width = (getWinWidth() / 7).toString() + "px";
        var buffer1 = document.getElementById('buffer1');
        buffer1.style.width = (getWinWidth() / 7).toString() + "px";
        var buffer2 = document.getElementById('buffer2');
        buffer2.style.width = (getWinWidth() / 7).toString() + "px";
    </script>
</html>